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)
@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
theindex
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
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
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:
@alan-agius4
but it worked on Angular 7, why you had to change it?
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 thefileReplacements
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:
However I want to use
es2015
as target. So, for now I will usees5
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.