Angular项目中angular.json声明的脚本无法加载问题求助

云上老周

2026-8-4

Angular项目angular.json脚本未加载的排查与解决方法

检查配置层级正确性
确认scripts数组是否在angular.json的正确层级下：必须放在projects -> [你的项目名称] -> architect -> build -> options（或test -> options）节点内，很多问题源于配置放错位置。正确结构示例：

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "options": {
          "scripts": [
            "node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js",
            "node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js",
            "node_modules/@clr/icons/clr-icons.min.js",
            "src/assets/js/app-info-parser.min.js",
            "node_modules/lz-string/libs/lz-string.min.js"
          ]
        }
      }
    }
  }
}

验证脚本路径准确性
逐个核对每个脚本的路径：
- 检查node_modules下的库文件是否存在，确认目录名、文件名的拼写（含大小写）无错误
- 确认src/assets/js/app-info-parser.min.js的实际文件位置与配置路径完全匹配
清理缓存并重启服务
1. 删除项目根目录下的dist文件夹
2. 清理npm缓存：npm cache clean --force
3. 重新安装依赖：npm install
4. 重启开发服务器：ng serve --open
排查构建模式配置差异
如果仅生产构建出现问题，检查architect -> build -> configurations -> production节点是否继承了options中的scripts配置，是否存在单独覆盖scripts的情况。
手动引入脚本测试
临时在index.html的<body>末尾添加<script>标签引入这些脚本：
```
<script src="node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
```
如果能正常加载，说明是angular.json配置问题；若仍无法加载，需检查文件本身是否损坏或路径错误。
核对库与Angular版本兼容性
确认引入的库（如@clr/icons）与当前Angular版本兼容，版本不匹配可能导致脚本无法被正确打包加载。