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


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

Repro steps

Reproduce git:

  • 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 image
  • home-a.component.ts in my source code image

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
  home-a works!
  • home-b.component.html in my source code
  home-b works!

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/*/**"

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 9
  • Comments: 39 (3 by maintainers)

Commits related to this issue

Most upvoted comments

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.

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

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?

I’m facing the same issue with CLI 6.2.2


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

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

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


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:

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"

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

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

The index option supports a longhand form as follows:

"index": {
  "input": "src/",
  "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.

also failed for me in version 8.0.1

@luillyfe My bad 🙈 Should be there now