angular-cli: html file replacement doesn't work

🐞 Bug report

Command (mark with an x)

- [ ] new
- [x] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Description

After upgrading to Angular 8 file replacement stopped working for html files.

🔬 Minimal Reproduction

https://github.com/diogen737/fileReplacement-test

Expexted behavior

since there’s html replacement config in angular.json after ng build --prod I expect to see
“this is prod index” on top of the page (localhost:8080/tester) which is present in index.prod.html and absent in index.html from which I conclude that html filre replacement is not working anymore.

🌍 Your Environment


Angular CLI: 8.0.0
Node: 12.3.1
OS: linux x64
Angular: 8.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.0
@angular-devkit/build-angular     0.800.0
@angular-devkit/build-optimizer   0.800.0
@angular-devkit/build-webpack     0.800.0
@angular-devkit/core              8.0.0
@angular-devkit/schematics        8.0.0
@ngtools/webpack                  8.0.0
@schematics/angular               8.0.0
@schematics/update                0.800.0
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.30.0

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 19
  • Comments: 26 (3 by maintainers)

Most upvoted comments

@alan-agius4 This really should have been mentioned as a breaking change in the release information

@clydin implemented https://github.com/angular/angular-cli/pull/15010 which offers more control over the index html and is available in the 8.2 beta version.

Apologies for any inconvenience caused.

Hi, this is because the index file for builds is outside of the webpack compilation. To change the index file, instead of fileReplacements the index option should be used.

https://angular.io/cli/build

@clydin unintentional or not, this was the official answer when the feature was asked for.

Also @alan-agius4 as far as I know we’re not on a dictatorship, throwing your answer and closing the issue without even letting the OP, or others that need the feature, answer.

This change broke a lot of builds.

A solution that worked for me:

Create a folder called

index-pages

with subfolders for each index page you have and update your package.json like so:

"build-i18n:en": "ng build --configuration production_en --index=/src/index-pages/production/index.html",

This will replace your index.html with the one in the folder

eventually

ng build --prod --configuration=production --index=src/index.prod.html
mv dist/index.prod.html dist/index.html

did the trick for me but I think it’s kinda ugly

@alan-agius4 Can you explain why you have closed this? Using index is not a like for like option.

Example of https://github.com/angular/angular-cli/pull/15010 configuration:

"architect":{
  "build": {
    "options": {
     "index": "src/index.html", //non-prod
    },
    "configurations": {
      "production":{
      "index": { //prod index replacement
        "input": "src/index.prod.html",
        "output": "index.html
      }
    }
  }
}

@alan-agius4

this is because the index file for builds is outside of the webpack compilation

but it worked on Angular 7, why you had to change it?

Hi, this is because the index file for builds is outside of the webpack compilation. To change the index file, instead of fileReplacements the index option should be used.

https://angular.io/cli/build

This is not a feasible solution as leveraging the --index argument does not rename the specified file the same way that file replacements does.

This feature was working fine in older versions of webpack. As far as I can see this is a breaking change. Why was this issue closed without further review?

I just finished all changes on my projects to move to Angular 8.
I deliver the whole thing in preproduction and the only thing that does not work anymore is the replacement of the index.html file. I also use the fileReplacements option to replace a JavaScript file and a JSON file and everything is fine.

If fileReplacements was never intending to be used like that, I can follow up your thinking. Nevertheless, you did make a breaking change and never tells about it or not clearly.

I cannot deliver the new features of my applications right now ! So, does someone can provide a solution ? I need to replace files during the production build because they are very different.

One twicky solution:

From @randysimplist I am having the same exact issue but only appears to surface when targeting es2015 in the tsconfig.json file.

If I target es5 the html file replacement works just fine.

However I want to use es2015 as target. So, for now I will use es5 but I am very disappointed.

For information, when serving the application:

$ ng serve --prod

instead of building it only:

$ ng build --prod

Then file replacements on index.html is done correctly.

The difference between the dev environment and the production environment can be quite confusing.

@clydin then it should be more documented because fileReplacements documentation does not impose any restrictions on the file type

I am having the same exact issue but only appears to surface when targeting es2015 in the tsconfig.json file.

If I target es5 the html file replacement works just fine.