Angular项目CSS/JS离线本地化配置及现有方案失效解决咨询

你之前配置不生效的常见原因如下：

• 路径填写错误：默认单项目结构下angular.json位于项目根目录，无需加../前缀，加了会向上跳转一级目录导致找不到对应资源
• 配置位置错误：styles和scripts必须配置在architect -> build -> options节点下，不要写到test、serve等其他配置块中
• 未重启开发服务：修改angular.json后必须重启ng serve才会加载新配置
• 未删除原有CDN链接：index.html中保留的CDN资源会优先加载，还可能和本地引入的资源产生冲突

方案一：npm包引入（推荐） #

步骤1：安装对应版本依赖 #

确保安装版本和之前使用的CDN版本完全一致，避免兼容性问题：

npm install bootstrap@4.5.0 jquery@3.5.1 popper.js@1.16.0 --save

步骤2：正确配置angular.json #

找到projects -> 你的项目名 -> architect -> build -> options节点，修改对应配置：

"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
  "node_modules/jquery/dist/jquery.slim.min.js",
  "node_modules/popper.js/dist/umd/popper.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

多项目工作区结构下，需要根据项目实际目录层级调整路径，保证路径是相对于angular.json所在目录的相对路径

步骤3：清理index.html的CDN资源 #

删除所有外链的CSS、JS资源，修改后的index.html内容如下：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular10</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

步骤4：验证生效 #

重启ng serve开发服务，断开网络测试页面样式和JS交互均可正常运行即可。

方案二：静态资源目录引入 #

如果不想通过npm管理依赖，可直接将资源放到静态目录加载：

1. 在src/assets下新建lib目录，将下载好的bootstrap.min.css、jquery.slim.min.js、popper.min.js、bootstrap.min.js放入该目录
2. 修改angular.json配置：

"styles": [
  "src/styles.css",
  "src/assets/lib/bootstrap.min.css"
],
"scripts": [
  "src/assets/lib/jquery.slim.min.js",
  "src/assets/lib/popper.min.js",
  "src/assets/lib/bootstrap.min.js"
]

3. 同样删除index.html中的CDN链接，重启开发服务即可生效。

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