升级Angular后fileReplacements对资源文件失效，如何解决？

为什么原fileReplacements配置失效 #

Angular CLI的fileReplacements仅针对TypeScript/JavaScript文件（如环境配置文件）生效，升级后该逻辑被严格执行，样式、静态资源等通过assets或styles配置管理的文件不再受其影响。

方案1：通过styles配置结合构建环境切换 #

直接在angular.json的目标构建配置中指定替换后的样式文件，覆盖默认配置：

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "options": {
          "styles": [
            "src/assets/scss/x.scss" // 默认使用的样式文件
          ]
        },
        "configurations": {
          "your-target-config": {
            // 其他构建配置（如压缩、环境变量等）
            "styles": [
              "src/assets/scss/app.scss" // 指定配置下替换为该文件
            ]
          }
        }
      }
    }
  }
}

构建时使用指定配置即可生效：

ng build --configuration=your-target-config

方案2：自定义Webpack配置实现精准替换 #

如果需要更灵活的文件替换（比如非样式类资源），可借助自定义Webpack配置实现：

1. 安装自定义Webpack构建器：

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

2. 修改angular.json中的构建器为自定义Webpack：

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "builder": "@angular-builders/custom-webpack:browser",
        "options": {
          "customWebpackConfig": {
            "path": "./webpack.config.js"
          },
          // 保留原有options配置
        },
        "configurations": {
          "your-target-config": {
            // 保留原有配置
          }
        }
      }
    }
  }
}

3. 项目根目录创建webpack.config.js，使用NormalModuleReplacementPlugin实现替换：

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.NormalModuleReplacementPlugin(
      // 匹配要替换的文件路径正则
      /src\/assets\/scss\/x\.scss$/,
      // 替换后的文件相对路径
      './app.scss'
    )
  ]
};

4. 执行指定配置的构建命令即可完成替换。

方案3：针对静态资源的assets配置调整 #

如果替换的是纯静态资源（如图片、JSON），可通过assets配置的glob规则结合环境变量实现：
在目标构建配置的assets数组中添加优先级更高的规则：

"configurations": {
  "your-target-config": {
    "assets": [
      {
        "input": "src/assets/scss",
        "output": "assets/scss/",
        "glob": "app.scss"
      },
      // 保留原有assets配置，确保其他资源正常打包
      "src/assets",
      "src/favicon.ico"
    ]
  }
}

注意：该方式会将app.scss复制到目标路径，但不会替换原有x.scss，若需要完全替换需配合删除原有文件或调整glob规则排除x.scss。

内容的提问来源于stack exchange，提问作者oox-hmz