Angular 12: How to replace component template in angular.json

Question

I used to replace template files by passing configurations earlier like this in angular.json file:

"fileReplacements": [
            {
              "replace": "global/components.abc.html",
              "with": "global/components.def.html"
            }
]

But now it's giving me errors on build:

Schema validation failed with the following errors:
Data path "/fileReplacements/2" must have required property 'src'.
Data path "/fileReplacements/2/replace" must match pattern "\.(([cm]?j|t)sx?|json)$".
Data path "/fileReplacements/2" must match exactly one schema in oneOf.

I went through some articles and found out that this has been the case since Angular CLI version 9. Previously however the offending file replacements were silently ignored.

A solution however is provided here: #14599 (comment) but it only provides a way to replace index.html files.

My question is there's a correct way to replace component template files? Any help is much appreciated.

Answer 1

Dont use fileReplacements

• they do not work for any other assets other than the matching regex

For index.html

As correctly pointed out, index is a special case, and it is handled with the link provided in the question

• It is included in the answer below

---

Solution for any resource type

Use case:

I wanted to replace .htaccess, favicon.ico, and other resources. The below approach specializes the assets in the build environments you want production/development.

Steps:

1. Created new folders in environments

• not sure if that is the correct location
• but I want everything that relates to different env in that folder

2. Adjusted build targets:

• in angular.json

// ...

"production": {
              "index": {
                "input": "src/environments/prod/index.html",
                "output": "index.html"
              },
              "assets": [
                // assets that must be included in all cases (common stuff)
                "src/sitemap.xml",
                "src/robots.txt",
                "src/assets",
                {
                  // mapping the root folder to /, for all files
                  "input": "src/environments/prod/root",
                  "output": "/",
                  "glob": "*"
                }
              ],
              "fileReplacements": [
                // DOES NOT WORK HERE
              ],
              
              // ...
            },

// similarly for development
"development": {
              "index": {
                "input": "src/environments/dev/index.html",
                "output": "index.html"
              },
              "assets": [
                "src/sitemap.xml",
                "src/robots.txt",
                "src/assets",
                {
                  "input": "src/environments/dev/root",
                  "output": "/",
                  "glob": "*"
                }
              ],
              // ...
            }