如何通过.angular-cli.json引入CDN第三方库？

嘿，我来帮你搞定这个问题！首先得明确一个核心点：.angular-cli.json的styles和scripts配置项只支持本地文件路径，直接填入CDN URL会触发编译失败，这就是你遇到问题的根源。下面给你两种可行的解决方案：

方案一：直接在index.html中引入CDN资源（最简单直接） #

这是最常用的方式，Angular CLI在构建项目时会保留index.html里的外部资源引用：

1. 打开项目根目录下的index.html文件
2. 在<head>标签里添加CDN的CSS资源，比如替换你本地的Bootstrap样式：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">

3. 在<body>标签的末尾（</body>之前）引入CDN的JS资源，比如jQuery和Bootstrap脚本：

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

4. 记得把.angular-cli.json里对应的本地库引用删掉，避免重复引入：

"styles": [
  "styles.css"
],
"scripts": []

方案二：通过自定义Webpack配置管理CDN（进阶，适合多环境切换） #

如果你希望通过CLI配置统一管理CDN资源（比如开发环境用本地包，生产环境用CDN），可以用自定义Webpack的方式：

1. 先安装依赖包：

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

2. 在项目根目录创建extra-webpack.config.js文件，配置CDN资源：

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

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: './src/index.html',
      links: [
        { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css' }
      ],
      scripts: [
        { src: 'https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js' },
        { src: 'https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js' }
      ]
    })
  ]
};

3. 修改.angular-cli.json中的build和serve配置，切换为自定义Webpack builder：

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./extra-webpack.config.js"
      },
      // 保留你原有其他配置项
    }
  },
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    "options": {
      "customWebpackConfig": {
        "path": "./extra-webpack.config.js"
      },
      // 保留你原有其他配置项
    }
  }
}

4. 同样要删除.angular-cli.json里对应的本地库引用，防止冲突。

额外提醒 #

如果你用的是Angular 6及以上版本，配置文件已经从.angular-cli.json改成angular.json了，但核心逻辑完全一致：styles和scripts只支持本地路径，CDN资源得通过index.html或自定义Webpack来引入。另外，用CDN时尽量锁定具体版本号，避免资源自动更新导致项目出问题。

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