Angular 12如何在angular.json中配置替换组件模板文件

Angular CLI 9+ 对fileReplacements配置做了强校验限制，仅允许替换后缀为.js/.ts/.json等可被编译系统识别的代码类文件，不支持直接替换HTML模板文件，因此你之前的配置会触发schema校验报错。

可行解决方案 #

方案1：组件层面条件加载（无额外依赖，最推荐） #

无需修改构建配置，直接通过环境变量配合Angular内置模板语法切换模板内容：

1. 先在对应环境的environment.ts中新增模板切换变量：

// environment.prod.ts 等需要替换模板的环境配置文件
export const environment = {
  // 其他原有配置
  useDefTemplate: true
};

2. 改造目标组件代码：

import { environment } from 'src/environments/environment';

@Component({
  selector: 'app-target-component',
  template: `
    <ng-container *ngIf="!environment.useDefTemplate">
      <!-- 原components.abc.html 内容 -->
    </ng-container>
    <ng-container *ngIf="environment.useDefTemplate">
      <!-- 原components.def.html 内容 -->
    </ng-container>
  `
})
export class TargetComponent {
  environment = environment;
}

如果模板体积较大，也可以拆分为两个独立组件，通过动态组件加载或者路由配置根据环境变量渲染对应组件。

方案2：自定义Webpack插件实现文件替换 #

如果不想修改业务代码，需要保留原有的文件替换逻辑，可以通过扩展Angular构建流程实现：

1. 安装依赖包：

npm install @angular-builders/custom-webpack @angular-devkit/build-angular --save-dev

2. 项目根目录新建webpack.config.js：

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.NormalModuleReplacementPlugin(
      /global\/components\.abc\.html$/,
      'global/components.def.html'
    )
  ]
};

3. 修改angular.json中的构建配置：
   将projects.<你的项目名>.architect.build.builder的默认值@angular-devkit/build-angular:browser替换为@angular-builders/custom-webpack:browser，并在options中新增自定义webpack配置路径：

"build": {
  "builder": "@angular-builders/custom-webpack:browser",
  "options": {
    "customWebpackConfig": {
      "path": "./webpack.config.js"
    },
    // 保留其他原有配置不变
  }
}

同时同步修改architect.serve.builder为@angular-builders/custom-webpack:dev-server，保证开发环境下替换逻辑也生效。

方案3：预构建脚本覆盖文件 #

如果不想改动构建工具配置，可通过简单的Node脚本在构建前直接覆盖目标文件：

1. 根目录新建replace-template.js：

const fs = require('fs');
// 用def模板覆盖abc模板
fs.copyFileSync('./global/components.def.html', './global/components.abc.html');

2. 修改package.json中的构建命令：

"scripts": {
  "build:custom": "node replace-template.js && ng build",
  // 其他原有命令保留
}

后续需要替换模板构建时，执行npm run build:custom即可，建议将global/components.abc.html加入.gitignore避免误提交覆盖后的内容。

内容的提问来源于stack exchange，提问作者Abhishek