Angular CLI未加载scripts区块脚本，jQuery/Bootstrap无法生效求助

我来帮你搞定这个头疼的问题！你遇到的情况其实挺常见的——明明在angular-cli.json的scripts区块配置了文件，却没被CLI打包进去，导致Bootstrap导航下拉失效，但CDN引入就正常。咱们一步步排查解决：

1. 先检查scripts数组里的路径是否正确 #

这是最容易踩坑的点！你得确保路径是相对于angular-cli.json所在位置的。比如你的项目根目录结构是这样的：

你的项目/
├── angular-cli.json
├── node_modules/
│   ├── jquery/
│   │   └── dist/
│   │       └── jquery.min.js
│   └── bootstrap/
│       └── dist/
│           └── js/
│               └── bootstrap.min.js

那angular-cli.json里的scripts配置应该是：

"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

如果路径写错了（比如多了或少了../），CLI找不到文件，自然不会把它打包进应用。

2. 修改配置后必须重启Angular CLI服务 #

别忽略这个细节！修改angular-cli.json之后，正在运行的ng serve不会自动读取新配置，必须先关掉服务，重新执行ng serve，新的配置才会生效。

3. 让TypeScript识别全局的jQuery变量 #

Bootstrap依赖全局的$或jQuery对象，所以需要在TypeScript里声明这些全局变量，避免编译报错，同时让Bootstrap能找到它：

• 在src目录下创建（如果没有的话）typings.d.ts文件
• 里面添加以下代码：

declare var $: any;
declare var jQuery: any;

4. 检查jQuery和Bootstrap的版本兼容性 #

不同版本的Bootstrap对jQuery版本有要求：

• Bootstrap 4.x 要求jQuery版本 ≥3.1.1
• Bootstrap 3.x 要求jQuery版本 ≥1.9.1
  你可以打开package.json查看当前的依赖版本，如果版本不匹配，建议升级到兼容的版本，然后执行npm install重新安装。

5. 验证脚本是否成功加载 #

重启服务后，打开浏览器开发者工具：

• 切换到「Sources」标签，查找是否有jquery.min.js和bootstrap.min.js
• 或者在「Console」里输入$，如果返回function (a,b){...}，说明jQuery已经成功加载

如果做完这些还是不行，可以把你的angular-cli.json和package.json里的相关配置贴出来，我再帮你揪出问题~

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