Angular-cli: html file replacement doesn't work

[diogen737]

🐞 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

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

[alan-agius4]

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

[diogen737]

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

[randysimplist]

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?

[dottodot]

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

[dottodot]

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

[clydin]

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.
It appears what is needed here is a more flexible “index” option which allows control of the output file name as well as the input. This has been requested previously and I think it would be a useful addition in general. The necessary logic is already present. The configuration options would just need to be expanded to provide the information to the index processing.

[diogen737]

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

[clydin]

The type actually isn't the relevant aspect. Only bundled files are affected by the option. HTML files used as templates are intended to work, for instance.

[C0ZEN]

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.

[diogen737]

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

[jlnknz]

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.

[boban984]

Updated to Angular 8, production builds not working ... scratching my head :)
A breaking change nobody even mentions 🤦‍♂️
Bravo

[randysimplist]

It seems like this is impacting a good number of people and we haven't seen any viable solutions to this problem yet.

Can we please re-open this issue?

[boban984]

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

[xxyyzz2050]

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



md5-730e534b1f404b9a8eba1848cd297a6a



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

[bridzius]

10992 would make one assume that index.html file replacement was actually an expected functionality in 6.1 Angular at least.

Would this mean that somewhere along the road the definition changed to only include bundled files?

[clydin]

It's always been that case. It just so happened that it unintentionally worked for the index.html in several previous versions. The index option is intended to control the input index.html file and will be receiving improvements within the 8.x timeframe to support input and output path control.

[abouroubi]

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

[alan-agius4]

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

[chrispoupart]

It would be nice if the documentation was updated with this feature, and if someone could provide an example.

[tomwhite007]

Yes, the docs on --index are distinctly lacking.

[schankam]

Had to use @boban984 answer to make it work. If you just let the index.prod.html in the root folder, and use it with --index, it will not be renamed properly... Don't get it, was working fine before and just realized today that our prod file was not the expected one 😫🤬Not cool

[Nodarii]

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

[kettunen]

I almost pushed our app to production with wrong index.html :(

@Nodarii answer works after deleting $schema -property (which is not nice) from angular.json. Schema seems outdated because it says that index should be a string.

[angular-automatic-lock-bot[bot]]

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