如何配置Angular构建以避免自动引入JS/CSS本地链接，改为后端从CDN手动引入？

我完全懂你的痛点——Angular构建完成后，自动把本地打包好的JS、CSS文件链接硬塞进index.html里，但你的CDN地址每周都更新，根本没法硬编码，必须靠后端动态注入链接对吧？别担心，下面给你几个实用的配置方案，帮你关掉这个自动注入的功能：

方案一：直接修改angular.json禁用自动注入 #

这是最简单直接的方法，不需要额外依赖：

• 打开项目根目录下的angular.json文件
• 找到projects -> [你的项目名称] -> architect -> build -> options这一段
• 添加或修改index配置项，把inject设为false：

"options": {
  // 其他现有配置...
  "index": {
    "input": "src/index.html",
    "output": "index.html",
    "inject": false
  }
}

这样配置后，Angular构建时就不会自动把打包生成的main.js、styles.css、polyfills.js这些文件的链接插入到你的index.html里了，你原模板里的{JSSCRIPTTAGS}、{JSCODE}这些占位符会完整保留，方便后端后续替换成最新的CDN链接。

方案二：用自定义Webpack配置实现更灵活控制 #

如果你的项目需要更复杂的构建逻辑，或者想自定义HtmlWebpackPlugin的行为，可以用这个方法：

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

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

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

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./custom-webpack.config.js"
      },
      // 其他现有配置...
    }
  }
}

3. 在项目根目录创建custom-webpack.config.js文件，配置HtmlWebpackPlugin禁用自动注入：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      inject: false, // 关键：禁用自动注入资源链接
      filename: 'index.html'
    })
  ]
};

这个方案适合需要扩展Webpack配置的场景，同样能保留你原index.html的结构，不让Angular自动插手资源引入。

额外注意事项 #

• 禁用自动注入后，你需要自己确保所有必要的打包资源都通过后端正确引入，包括代码分割生成的chunk文件。Angular构建后会生成asset-manifest.json文件，里面列出了所有打包后的资源路径，后端可以解析这个文件来动态生成对应的CDN链接，这样就不会漏掉任何资源啦。
• 配置完成后记得执行一次构建命令（比如ng build），检查生成的dist目录里的index.html，确认没有自动插入的本地链接，你的占位符都正常保留。

内容来源于stack exchange