Angular-cli: [Bug] fileReplacements configuration can not replace html files

[idododu]

Versions

Angular CLI: 6.0.0
Node: 8.11.1
Angular: 6.0.0
Windows 7

Repro steps

Reproduce git: https://github.com/idododu/ng6-filereplacements-bug

• Step 1: add fileReplacements config in configurations block of angular.json

           "project-b": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.project-b.ts"
                },
                {
                  "replace": "src/app/home-a/home-a.component.html",
                  "with":    "src/app/home-b/home-b.component.html"
                },
                {
                  "replace": "src/app/home-a/home-a.component.ts",
                  "with":    "src/app/home-b/home-b.component.ts"
                }
              ]
            }

• Step 2: npm run project-b to start dev server

Observed behavior

home-a.component.ts was replaced correctly.

• home-a.component.ts in chrome source
  
• home-a.component.ts in my source code
  

home-a.component.ts was not replaced

• home-a.component.html in chrome source

module.exports = "<p>\r\n  home-a works!\r\n</p>\r\n"

• home-a.component.html in my source code

<p>
  home-a works!
</p>

• home-b.component.html in my source code

<p>
  home-b works!
</p>

Desired behavior

1. Expected to see
   content of home-a.component.html should be replaced by home-b.component.html since i have configed in angular.json

{
                  "replace": "src/app/home-a/home-a.component.html",
                  "with":    "src/app/home-b/home-b.component.html"
                },

1. Usecase
   Suppose we got two projects: Project A and Project B.
   They share the most of my source codes except HomeComponent.
   And I would like to put the codes in the same repo, and build different projects through environments configuration.

Mention any other details that might be useful (optional)

Another point: can we support glob expressions in fileReplacements configuration?

{
  "replace": "src/app/home-a/*/**",
  "with": "src/app/home-b/*/**"
}

[phl3x0r]

Confirmed. This doesn't work for me either:

"fileReplacements": [
                {
                  "replace": "src/app/app.component.html",
                  "with": "src/app/som-other.html"
                }
              ]

However it still goes to look for the file, I noticed this because I misspelled 'some-other.html' and got the following error:
The src/app/some-other.html path in file replacements does not exist.

[Brocco]

FYI, this has been addressed and will be part of the 6.1 release.

To look at that change, please refer to this PR: angular/devkit#887

[avbentem]

Just for reference: https://github.com/angular/devkit/issues/885 explains:

Currently, the file replacement functionality works only for TS files. More specifically - it works only for files that are part of the webpack compiler host.

The above-mentioned https://github.com/angular/devkit/pull/887 apparently fixes that; can't wait for 6.1 now ;-)

(And indeed, for me .scss files are not copied either.)

[robindijkhof]

scss files are indeed not copied. Also not working with 6.1.0-beta.2. Any idea if it will be?

[suau]

FYI, not working in 6.1.0-rc.0 either
UPDATE: if updating an existing project it's not enough to update the global and project-local @angular/cli version, you also need to update the @angular-devkit/build-angular package to 0.7.0-rc.0.
It is a separate package.

npm i -g @angular/[email protected]
cd your-project-folder
npm i -D  @angular/[email protected] @angular-devkit/[email protected]

@robindijkhof

[luillyfe]

Issue still happening in this version: "@angular/cli": "6.1.5".

[georgefam]

Issue still happening in this version: "@angular/cli": "6.1.5".

"configurations": {
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
}
}

UPDATE:

fixed by updating @angular-devkit/build-angular as @suau suggested Thanks @suau

[suau]

@luillyfee @georgefam did you make sure you've updated @angular-devkit/build-angular as well ?

[luillyfe]

@suau I can no longer reproduce this issue. Also I cannot remember how I did make it work, maybe is how you are pointing out.

[developcodeza-matthew]

Any updates on this issue? Should it be fixed in 6.1.5?

Im trying to replace a constants.scss (with constants.newconfig.scss) file that I import at the top of my root styles file. But none of the newconfig styles are pulling through.

The strange thing is if I use this method with a component specific scss file it works perfectly. From what I can see its only with the root style files.

Here's a stackoverflow link to my question.

Im using 6.1.5

[luillyfe]

@developcodeza-matthew there is not link in your answer!

[developcodeza-matthew]

@luillyfe My bad 🙈 Should be there now

[iki789]

I'm facing the same issue with CLI 6.2.2

---

UPDATE:

I fixed it by updating @angular-devkit/build-angular as @suau suggested

[MarkJAmes1217]

@iki789 You save my life . Thanks Bro.

[oberoivarun]

Is it possible to do dynamic file replacements?

I'm trying to build two different UI's from the same App. So i have two different html files.

          "fileReplacements": [
            {
              "replace": "**.template1.ts",
              "with": "**.template2.ts"
            }

It's throwing me an error. Is this possible?

[shayll-herolo]

using angular ^6.0.9 & angular/cli ^6.0.8, updated @angular-devkit/build-angular in devDependencies in package.json to ^0.8.9. seems to work as expected with environments and all

[kojilab]

with @angular/cli 7.3.0 html files are not replaced.

[AntonisFK]

Replacing html files is good feature to have. Very strange that the angular team hasn't addressed this issue.

[MattCMcNabb]

Has anyone got a fix for this yet?

[suau]

UPDATE: if updating an existing project it's not enough to update the global and project-local @angular/cli version, you also need to update the @angular-devkit/build-angular package to 0.7.0-rc.0.
It is a separate package.

npm i -g @angular/[email protected]
cd your-project-folder
npm i -D  @angular/[email protected] @angular-devkit/[email protected]

@robindijkhof

@AntonisFK @MattCMcNabb did you make sure yo update to the newest version as well ? works fine for me.

[Jun711]

@suau @Brocco

Has anyone tried to replace app.module.ts?

[Santalov]

@Jun711
Have tried to replace app.module.ts with app.module.promoter.ts, but get error, that AppComponent is in 2 modules.
ERROR in : Type AppComponent in C:/Users/santa/WebstormProjects/theBox/src/app/app.component.ts is part of the declarations of 2 modules: AppModule in C:/Users/santa/WebstormProjects/theBox/src/app/app.module.ts and AppModule in C:/Users/santa/WebstormProjects/theBox/src/app/app.module.promoter.ts! Please consider moving AppComponent in C:/Users/santa/WebstormProjects/theBox/src/app/app.component.ts to a higher module that imports AppModule in C:/Users/santa/WebstormProjects/theBox/src/app/app.module.ts and AppModule in C:/Users/santa/WebstormProjects/theBox/src/app/app.module.promoter.ts. You can also create a new NgModule that exports and includes AppComponent in C:/Users/santa/WebstormProjects/theBox/src/app/app.component.ts then import that NgModule in AppModule in C:/Users/santa/WebstormProjects/theBox/src/app/app.module.ts and AppModule in C:/Users/santa/WebstormProjects/theBox/src/app/app.module.promoter.ts.
And there are no references to the app.module.promoter.ts in code at all.

[C0ZEN]

I never had this problem, but since I updated my project to Angular 8, this is not working anymore.
The replacement of the index.html does not occur.

[jlnknz]

I never had this problem, but since I updated my project to Angular 8, this is not working anymore.
The replacement of the index.html does not occur.

For later reference, in #14599, @clydin said:

The file replacements option was never intended to replace files outside of the script bundles. That it worked previously was more of a defect itself than anything else.

See this ticket for temporary workarounds (disable es2015 targetting or rename index file after building).

[xxyyzz2050]

even .ts not worked for me

//angular.json -> projects.myProject.architect.build.configurations.dev :
//also in architect.server section

"dev": {
              "fileReplacements": [
                {
                  "replace": "src/environments/index.ts",
                  "with": "src/environments/dev.ts"
                }
              ]
            }

//src/environments/index.ts
console.log("index")



md5-d66f5be5e7d1a904b8f9956c933549fd



//src/environments/dev.ts
console.log("dev")

> ng run myProject:build:dev && ng run myProject:server:dev && npx webpack --config webpack.server.config.js --progress --colors && nodemon dist/server --inspaect --open --watch

import env from "../src/environments/index.ts" //<--- should be replaced with dev.ts

it prints the console.log of index.ts not dev.ts

repo: https://github.com/xxyyzz2050/eldeebCMS

[BovineEnthusiast]

Can confirm this bug with Angular 8.1.3 (build-angular at 0.801.3). I've worked around it for now by having the following build script. I simply copy over the correct index.html at the end:

"build:stg": "ng build --configuration=staging && cp src/index.staging.html dist/index.html"

[elliotsabitov]

also failed for me in version 8.0.1

[vaughnmuirhead]

Failed for me on build but works on serve.

Config is:

            {
              "replace": "src/index.html",
              "with": "src/prod/index.html"
            }

Angular CLI: 8.0.3
Node: 10.16.0
OS: win32 x64
Angular: 8.0.1
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, material, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.800.3
@angular-devkit/build-angular 0.800.3

@angular-devkit/build-optimizer 0.800.3
@angular-devkit/build-webpack 0.800.3
@angular-devkit/core 8.0.3
@angular-devkit/schematics 8.0.3
@angular/cli 8.0.3
@angular/flex-layout 8.0.0-beta.26
@ngtools/webpack 8.0.3
@schematics/angular 8.0.3
@schematics/update 0.800.3
rxjs 6.5.2
typescript 3.4.5
webpack 4.30.0

[BilalAlam173]

@vaughnmuirhead Exact same case with me.

[ricardosaracino]

Can confirm this bug with Angular 8.1.3 (build-angular at 0.801.3). I've worked around it for now by having the following build script. I simply copy over the correct index.html at the end:

"build:stg": "ng build --configuration=staging && cp src/index.staging.html dist/index.html"

how do the scripts get injected into the index staging?

i have resorted to this should work in the azure pipeline

    "build:en": "copy src\\index.en.html src\\index.html && ng build --configuration=production-en",
    "build:fr": "copy src\\index.fr.html src\\index.html && ng build --configuration=production-fr",

[Chris1234567899]

Can confirm it does not work yet in 0.803.2

Trying to reference the index directly (not replacing it) seems to be another solution meanwhile:
https://stackoverflow.com/a/57274333/3719922

[lukegorman]

This is working in my angular client but not in my angular universal ssr project.

Not doing anything differently.

[racerhere]

"fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" }, { "replace": "src/index.html", "with": "src/index.prod.html" } ]

This is still not replacing the index.html in the build.
@angular/cdk 8.2.0
@angular/cli 8.3.4
@angular/core 8.2.6
@angular-devkit/build-angular 0.803.4

Can anyone tell me if I am using the file replacements correctly?

[lukegorman]

@racerhere as stated above fileReplacements only works with certain filetypes.
The most simple alternative is to use a shell script to replace those file in the build process.

[ricardosaracino]

@racerhere there is some discussion here

https://stackoverflow.com/questions/50113794/angular-how-to-dynamically-change-the-content-in-the-index-html-file-when-runn/57778511#57778511

[eliraneliassy]

@mgechev Can you please reopen this bug so it will be priorities?

[shayll-herolo]

I had the same issue. fortunately, our project only had 2 files for replacement so it was quite easy to change.
in angular.json for every configuration just add the index property with a value of the path to the correct html file.
https://angular.io/cli/build

so if previously the replacement was index.dev.html to index.html, the dist folder will only contain index.dev.html
if thats not good enough, you can make a directory for each html file and just keep it as index.html.

here's an example:

{
   "configurations":{
      "production":{
         "fileReplacements":[
            {
               "replace":"environments/environment.ts",
               "with":"environments/environment.prod.ts"
            }
         ],
         "optimization":true,
         "outputHashing":"all",
         "sourceMap":false,
         "extractCss":true,
         "namedChunks":false,
         "index":"src/prod-index/index.html",
         "aot":true,
         "extractLicenses":true,
         "vendorChunk":true,
         "buildOptimizer":true,
         "budgets":[
            {
               "type":"initial",
               "maximumWarning":"2mb",
               "maximumError":"5mb"
            }
         ]
      },
      "dev":{
         "aot":false,
         "index":"src/dev-index/index.html",
         "fileReplacements":[
            {
               "replace":"environments/environment.ts",
               "with":"environments/environment.dev.ts"
            }
         ]
      }
   }
}

note the index property is referring to dev-index directory for dev configuration and to prod-index for prod configuration

it's kind of messy because if you have more then 2 different index html files you might need a lot more directories but other than that it works for me with angular 8.2.4

[clydin]

The index option supports a longhand form as follows:

"index": {
  "input": "src/index.prod.html",
  "output": "index.html",
},

Note that the schema used for IDE integration erroneously marks this as invalid (this will be corrected in the next patch release) but it can otherwise be safely used.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}