无法将jQuery导入Angular5，已执行多项配置仍未解决

你已经做了大部分基础配置，我来帮你排查几个容易被忽略的关键点，应该能解决问题：

• 检查.angular-cli.json中的脚本路径是否正确
  你的配置里用了../node_modules/...，但.angular-cli.json本身就在项目根目录下，直接用./node_modules/...或者省略开头的./即可，错误的路径会导致jQuery没有被正确加载。修正后的scripts数组应该是：

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

• 修改配置后必须重启Angular CLI服务
  修改.angular-cli.json后，ng serve不会自动读取新配置，一定要停止当前服务，重新运行ng serve，否则新的脚本引入不会生效。

• 正确在组件中使用jQuery
  因为你已经全局引入了jQuery并安装了类型包，有两种方式可以在组件中使用：

  1. 全局声明方式：在组件文件的顶部添加声明，无需额外导入：

     declare var $: any;
     

     之后就可以直接在组件方法里使用$('#element')这类代码了。
  2. 模块导入方式：直接在组件中导入jQuery：

     import * as $ from 'jquery';
     

     这种方式不需要依赖全局脚本配置，但如果已经在scripts里全局引入了，两种方式都可以正常工作。

• 检查@types/jquery的版本兼容性
  Angular 5对应的TypeScript版本是2.4.x左右，过于新版本的@types/jquery可能会出现兼容性问题。你可以安装一个适配的旧版本：

  npm install --save-dev @types/jquery@3.3.32
  

• 移除main.ts中不必要的配置
  你提到在main.ts中添加了变量，这步确实非必需，反而可能引入冲突，建议先移除相关代码，排除干扰。

按照上面的步骤逐一排查，应该就能顺利在Angular 5中使用jQuery了。

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