[Bug] fileReplacements configuration can not replace html files #10881

idododu · 2018-05-16T08:22:46Z

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

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

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

The text was updated successfully, but these errors were encountered:

phl3x0r · 2018-05-16T08:45:52Z

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 · 2018-05-16T19:52:03Z

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 · 2018-05-22T08:39:51Z

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 · 2018-06-11T16:11:55Z

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

suau · 2018-06-21T11:03:20Z

~~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 · 2018-08-29T05:41:30Z

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

georgefam · 2018-09-04T11:52:55Z

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 · 2018-09-04T11:58:21Z

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

luillyfe · 2018-09-04T23:55:47Z

@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 · 2018-09-05T13:50:16Z

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 · 2018-09-05T14:44:44Z

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

developcodeza-matthew · 2018-09-05T14:47:35Z

@luillyfe My bad 🙈 Should be there now

iki789 · 2018-09-14T19:07:06Z

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 · 2018-09-20T06:53:00Z

@iki789 You save my life . Thanks Bro.

oberoivarun · 2018-09-24T08:44:12Z

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 · 2019-02-04T10:12:32Z

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 · 2019-02-22T00:30:47Z

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

AntonisFK · 2019-03-07T19:41:07Z

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

ANewChanceAtLife · 2019-03-13T10:58:36Z

Has anyone got a fix for this yet?

suau · 2019-03-13T15:26:01Z

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 · 2019-03-21T22:07:31Z

@suau @Brocco

Has anyone tried to replace app.module.ts?

Santalov · 2019-05-24T14:33:50Z

@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 · 2019-06-04T12:15:20Z

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 · 2019-06-07T03:43:26Z

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 · 2019-07-02T11:07:13Z

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")

//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 · 2019-07-29T22:13:31Z

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 · 2019-07-29T22:37:54Z

also failed for me in version 8.0.1

vaughnmuirhead · 2019-08-06T00:42:08Z

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 · 2019-08-16T07:38:43Z

@vaughnmuirhead Exact same case with me.

ricardosaracino · 2019-08-20T16:54:58Z

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 · 2019-09-03T20:36:25Z

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 · 2019-09-05T14:27:32Z

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

Not doing anything differently.

racerhere · 2019-09-12T03:53:01Z

"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 · 2019-09-12T07:32:45Z

@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 · 2019-09-12T09:31:22Z

@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 · 2019-09-12T13:46:16Z

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

shayll-herolo · 2019-09-12T14:43:06Z

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 · 2019-09-12T14:54:51Z

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.

See angular/angular-cli#10881 for discussion on replacing index files per-environment

angular-automatic-lock-bot · 2019-10-13T08:02:48Z

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.}

Brocco added the comp: cli/build label May 16, 2018

Brocco closed this as completed May 16, 2018

ghost mentioned this issue May 25, 2018

Angular.json File replacement not working for index.html file #10992

Closed

1 task

Serrulien mentioned this issue Jul 6, 2018

fileReplacements doesn't work with css files #11451

Closed

gunsh mentioned this issue Jul 11, 2019

HTML files and fileReplacements work differently for "ng serve --prod" and "ng build --prod" #15045

Closed

NoelLH added a commit to thebiggive/donate-frontend that referenced this issue Oct 3, 2019

DON-66 - fix index replacements + favicons

931e2b3

See angular/angular-cli#10881 for discussion on replacing index files per-environment

angular-automatic-lock-bot bot locked and limited conversation to collaborators Oct 13, 2019

[Bug] fileReplacements configuration can not replace html files #10881

[Bug] fileReplacements configuration can not replace html files #10881

Comments

idododu commented May 16, 2018

Versions

Repro steps

Observed behavior

Desired behavior

Mention any other details that might be useful (optional)

phl3x0r commented May 16, 2018 • edited Loading

Brocco commented May 16, 2018

avbentem commented May 22, 2018

robindijkhof commented Jun 11, 2018

suau commented Jun 21, 2018 • edited Loading

luillyfe commented Aug 29, 2018

georgefam commented Sep 4, 2018 • edited Loading

suau commented Sep 4, 2018

luillyfe commented Sep 4, 2018

developcodeza-matthew commented Sep 5, 2018 • edited Loading

luillyfe commented Sep 5, 2018

developcodeza-matthew commented Sep 5, 2018

iki789 commented Sep 14, 2018 • edited Loading

MarkJAmes1217 commented Sep 20, 2018

oberoivarun commented Sep 24, 2018

shayll-herolo commented Feb 4, 2019

kojilab commented Feb 22, 2019

AntonisFK commented Mar 7, 2019

ANewChanceAtLife commented Mar 13, 2019

suau commented Mar 13, 2019

Jun711 commented Mar 21, 2019 • edited Loading

Santalov commented May 24, 2019 • edited Loading

C0ZEN commented Jun 4, 2019 • edited Loading

jlnknz commented Jun 7, 2019

xxyyzz2050 commented Jul 2, 2019

BovineEnthusiast commented Jul 29, 2019 • edited Loading

elliotsabitov commented Jul 29, 2019

vaughnmuirhead commented Aug 6, 2019

Package Version

BilalAlam173 commented Aug 16, 2019

ricardosaracino commented Aug 20, 2019

Chris1234567899 commented Sep 3, 2019

lukegorman commented Sep 5, 2019 • edited Loading

racerhere commented Sep 12, 2019

lukegorman commented Sep 12, 2019

ricardosaracino commented Sep 12, 2019

eliraneliassy commented Sep 12, 2019

shayll-herolo commented Sep 12, 2019

clydin commented Sep 12, 2019 • edited Loading

angular-automatic-lock-bot bot commented Oct 13, 2019

phl3x0r commented May 16, 2018 •

edited

Loading

suau commented Jun 21, 2018 •

edited

Loading

georgefam commented Sep 4, 2018 •

edited

Loading

developcodeza-matthew commented Sep 5, 2018 •

edited

Loading

iki789 commented Sep 14, 2018 •

edited

Loading

Jun711 commented Mar 21, 2019 •

edited

Loading

Santalov commented May 24, 2019 •

edited

Loading

C0ZEN commented Jun 4, 2019 •

edited

Loading

BovineEnthusiast commented Jul 29, 2019 •

edited

Loading

lukegorman commented Sep 5, 2019 •

edited

Loading

clydin commented Sep 12, 2019 •

edited

Loading