html file replacement doesn't work #14599

diogen737 · 2019-05-30T21:01:54Z

🐞 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

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

randysimplist · 2019-05-30T23:28:51Z

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 · 2019-05-31T05:24:56Z

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 · 2019-05-31T07:55:39Z

@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 · 2019-05-31T13:05:11Z

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 · 2019-05-31T13:14:04Z

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

dottodot · 2019-05-31T13:28:09Z

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

clydin · 2019-05-31T13:32:52Z

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 · 2019-06-03T18:15:58Z

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

clydin · 2019-06-03T18:28:53Z

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 · 2019-06-04T12:35:17Z

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 · 2019-06-04T16:39:53Z

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 · 2019-06-07T03:50:22Z

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.

boban100janovski · 2019-06-07T13:20:56Z

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

randysimplist · 2019-06-07T13:34:51Z

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?

boban100janovski · 2019-06-07T13:52:23Z

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 · 2019-07-02T10:55:25Z

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

bridzius · 2019-07-03T14:23:14Z

#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 · 2019-07-03T14:31:04Z

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 · 2019-07-06T13:24:32Z

@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 · 2019-07-11T10:28:03Z

@clydin implemented #15010 which offers more control over the index html and is available in the 8.2 beta version.

Apologies for any inconvenience caused.

chrispoupart · 2019-07-31T19:35:03Z

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

tomwhite007 · 2019-08-02T12:35:32Z

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

schankam · 2019-09-01T15:12:43Z

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 · 2019-09-02T12:32:55Z

Example of #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 · 2019-09-21T17:59:44Z

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 · 2019-10-22T08:04:21Z

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

alan-agius4 closed this as completed May 31, 2019

jlnknz mentioned this issue Jun 7, 2019

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

Closed

alan-agius4 mentioned this issue Jul 11, 2019

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

Closed

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

html file replacement doesn't work #14599

html file replacement doesn't work #14599

diogen737 commented May 30, 2019 •

edited

Loading

randysimplist commented May 30, 2019

alan-agius4 commented May 31, 2019

diogen737 commented May 31, 2019

randysimplist commented May 31, 2019 •

edited

Loading

dottodot commented May 31, 2019 •

edited

Loading

dottodot commented May 31, 2019

clydin commented May 31, 2019 •

edited

Loading

diogen737 commented Jun 3, 2019

clydin commented Jun 3, 2019

C0ZEN commented Jun 4, 2019 •

edited

Loading

diogen737 commented Jun 4, 2019

jlnknz commented Jun 7, 2019 •

edited

Loading

boban100janovski commented Jun 7, 2019

randysimplist commented Jun 7, 2019

boban100janovski commented Jun 7, 2019 •

edited

Loading

xxyyzz2050 commented Jul 2, 2019

bridzius commented Jul 3, 2019 •

edited

Loading

clydin commented Jul 3, 2019

abouroubi commented Jul 6, 2019

alan-agius4 commented Jul 11, 2019

chrispoupart commented Jul 31, 2019

tomwhite007 commented Aug 2, 2019

schankam commented Sep 1, 2019 •

edited

Loading

Nodarii commented Sep 2, 2019

kettunen commented Sep 21, 2019

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

html file replacement doesn't work #14599

html file replacement doesn't work #14599

Comments

diogen737 commented May 30, 2019 • edited Loading

🐞 Bug report

Command (mark with an x)

Description

🔬 Minimal Reproduction

Expexted behavior

🌍 Your Environment

randysimplist commented May 30, 2019

alan-agius4 commented May 31, 2019

diogen737 commented May 31, 2019

randysimplist commented May 31, 2019 • edited Loading

dottodot commented May 31, 2019 • edited Loading

dottodot commented May 31, 2019

clydin commented May 31, 2019 • edited Loading

diogen737 commented Jun 3, 2019

clydin commented Jun 3, 2019

C0ZEN commented Jun 4, 2019 • edited Loading

diogen737 commented Jun 4, 2019

jlnknz commented Jun 7, 2019 • edited Loading

boban100janovski commented Jun 7, 2019

randysimplist commented Jun 7, 2019

boban100janovski commented Jun 7, 2019 • edited Loading

xxyyzz2050 commented Jul 2, 2019

bridzius commented Jul 3, 2019 • edited Loading

clydin commented Jul 3, 2019

abouroubi commented Jul 6, 2019

alan-agius4 commented Jul 11, 2019

chrispoupart commented Jul 31, 2019

tomwhite007 commented Aug 2, 2019

schankam commented Sep 1, 2019 • edited Loading

Nodarii commented Sep 2, 2019

kettunen commented Sep 21, 2019

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

diogen737 commented May 30, 2019 •

edited

Loading

Command (mark with an `x`)

randysimplist commented May 31, 2019 •

edited

Loading

dottodot commented May 31, 2019 •

edited

Loading

clydin commented May 31, 2019 •

edited

Loading

C0ZEN commented Jun 4, 2019 •

edited

Loading

jlnknz commented Jun 7, 2019 •

edited

Loading

boban100janovski commented Jun 7, 2019 •

edited

Loading

bridzius commented Jul 3, 2019 •

edited

Loading

schankam commented Sep 1, 2019 •

edited

Loading