调用ng build时插装Angular 7代码，angular.json配置咨询

要实现ng build时自动插装代码同时保留HTML/CSS等资源，你需要借助自定义Webpack配置来集成istanbul-instrumenter-loader，而不是单独提前插装。下面是具体步骤：

1. 安装必要依赖 #

首先安装自定义Webpack构建器和插装loader：

npm install @angular-builders/custom-webpack istanbul-instrumenter-loader --save-dev

2. 修改angular.json的build配置 #

将默认的构建器替换为自定义Webpack构建器，并指定自定义配置文件：

{
  "projects": {
    "my-project": {
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./webpack-instrumentation.config.js"
            },
            // 保留你原有的build options（比如outputPath, index, main等）
            "outputPath": "dist/my-project",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          // 可选：只在特定环境（比如测试环境）启用插装
          "configurations": {
            "production": {
              // 原有的production配置
            },
            "coverage": {
              "customWebpackConfig": {
                "path": "./webpack-instrumentation.config.js"
              },
              "optimization": false,
              "sourceMap": true // 开启sourceMap方便覆盖率映射到源代码
            }
          }
        }
      }
    }
  }
}

3. 创建自定义Webpack配置文件 #

在项目根目录创建webpack-instrumentation.config.js，配置istanbul-instrumenter-loader处理TypeScript代码：

module.exports = {
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: [/node_modules/, /\.spec\.ts$/],
        use: {
          loader: 'istanbul-instrumenter-loader',
          options: {
            esModules: true // 适配Angular的ES模块规范
          }
        },
        enforce: 'post' // 确保在ts-loader编译完成后再执行插装
      }
    ]
  }
};

4. 执行插装构建 #

如果配置了专门的coverage环境，运行：

ng build --configuration=coverage

如果想默认build就启用插装，直接运行ng build即可。

这样配置后，ng build会在编译TypeScript代码后自动完成插装，同时完整保留HTML、CSS、静态资源等所有文件，解决你之前单独插装丢失资源的问题。

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