[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"
                },

2. 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: angular/devkit#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 angular/devkit#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/cli@6.1.0-rc.0
cd your-project-folder
npm i -D  @angular/cli@6.1.0-rc.0 @angular-devkit/build-angular@0.7.0-rc.0

@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!