Angular.json's fileReplacements no longer accept .html replacements in Angular 11

[ChristopherHoffman]

🐞 bug report

Affected Package

The issue is caused by package @angular/cli: "~11.0.1",

Is this a regression?

Yes, the previous version in which this bug was not present was "@angular/cli": "^10.2.0",

Description

Angular 11's angular.json no longer allows fileReplacements with .html files, as the @angular/cli schema says .html files are invalid. ng build --prod also errors when trying to run with html in fileReplacements

angular.json

...
      "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                },
                {
                  "replace": "src/index.html",
                  "with": "src/index.prod.html"
                }
              ],
...

Running ng build --prod exits with error:

> ng build --prod

Schema validation failed with the following errors:
  Data path ".fileReplacements[1]" should NOT have additional properties(replace).
  Data path ".fileReplacements[1].replace" should match pattern "\.([cm]?j|t)sx?$".
  Data path ".fileReplacements[1]" should match exactly one schema in oneOf.

vscode also gives a linting warning with String does not match the pattern of "\.([cm]?j|t)sx?$". for the two .html lines.

Expectation

Expect that .html fileReplacements replacements are allowed, since it is useful to have different meta tags and other analytics scripts stored in the index.html file for different build configurations.

🔬 Minimal Reproduction

Example repo here: https://github.com/ChristopherHoffman/Angular11-Html-File-Replacement-Broken/tags

Tag "Working" is a fresh app using the Angular 10 cli, with just a index.prod.html to the angular.json's production configuration. ng build --prod works as expected.

Tag "Broken" is just after updating to Angular 11, and ng build --prod no longer works because of that .html.

🔥 Exception or Error

> ng build --prod

Schema validation failed with the following errors:
  Data path ".fileReplacements[1]" should NOT have additional properties(replace).
  Data path ".fileReplacements[1].replace" should match pattern "\.([cm]?j|t)sx?$".
  Data path ".fileReplacements[1]" should match exactly one schema in oneOf.

🌍 Your Environment

Angular Version:

Angular CLI: 11.0.1
Node: 14.5.0
OS: win32 x64

Angular: 11.0.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, material, material-moment-adapter
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.1
@angular-devkit/build-angular   0.1100.1
@angular-devkit/core            11.0.1
@angular-devkit/schematics      11.0.1
@angular/cli                    11.0.1
@angular/flex-layout            11.0.0-beta.33
@schematics/angular             11.0.1
@schematics/update              0.1100.1
rxjs                            6.6.3
typescript                      4.0.5

[alan-agius4]

Hi @ChristopherHoffman, this has been the cases since Angular CLI version 9. Previously however the offending file replacements were silently ignored. In version 11, we now issue an error which is more actionable when we find invalid entries listed in fileReplacements.

See #16779 and #16439 for more context.

[dougamos]

Is there a workaround to achieve the above use case? ie. " to have different meta tags and other analytics scripts stored in the index.html file for different build configurations."

We do something similar and cannot upgrade to angular 11 because of this restriction.

[alan-agius4]

@dougamos, file replacements on html didn't work since Angular version 9.

To correctly replace an HTML, you can use the index option. See #14599 (comment) for an example.

[chumbalum]

@dougamos, file replacements on html didn't work since Angular version 9.

I use fileReplacements for several HTML files with angular 10.2.0 currently, which does work. This change prevents me from updating.

Is there another way to exchange template Files for components?

[Lexa950609]

Has anyone found a solution for above issue? Even I'm using fileReplacements for several HTML files to override some functionalities in sub projects,, Due to this restriction, I couldn't update my project to Angular 11 yet.
Hence, If someone suggests a solution for that, it'd be a big help for me at this moment :(

[PhilippMeissner]

Has anyone found a solution for above issue? Even I'm using fileReplacements for several HTML files to override some functionalities in sub projects,, Due to this restriction, I couldn't update my project to Angular 11 yet.
Hence, If someone suggests a solution for that, it'd be a big help for me at this moment :(

Yes, you can try what @alan-agius4 suggested - This worked just fine for me.

[Lexa950609]

Has anyone found a solution for above issue? Even I'm using fileReplacements for several HTML files to override some functionalities in sub projects,, Due to this restriction, I couldn't update my project to Angular 11 yet.
Hence, If someone suggests a solution for that, it'd be a big help for me at this moment :(

Yes, you can try what @alan-agius4 suggested - This worked just fine for me.

"index" option only works for replacing index.html isn't it??

[PhilippMeissner]

Has anyone found a solution for above issue? Even I'm using fileReplacements for several HTML files to override some functionalities in sub projects,, Due to this restriction, I couldn't update my project to Angular 11 yet.
Hence, If someone suggests a solution for that, it'd be a big help for me at this moment :(

Yes, you can try what @alan-agius4 suggested - This worked just fine for me.

"index" option only works for replacing index.html isn't it??

Ah yes, you are right. Sorry, my bad :/
Couldn't you switch to a custom script that does the heavy lifting maybe?

[angular-automatic-lock-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.}