Angular 5.2（JHipster 4.14.1）应用如何确保jQuery先于Bootstrap加载？

针对你遇到的Bootstrap切换按钮失效、Bootstrap早于jQuery加载的问题，在JHipster 4.x生成的Angular 5.x应用里，主要通过以下几个配置点来调整脚本加载顺序：

• 修改.angular-cli.json配置文件
  Angular 5使用的是.angular-cli.json（Angular 6+才改为angular.json），找到文件中的scripts数组，把jQuery的路径放在Bootstrap前面，确保加载顺序正确：

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

  注意路径要和你的项目node_modules位置对应，如果是在src目录下引用，可能需要调整路径前缀。

• 检查JHipster的Webpack配置文件
  如果你项目里有自定义的Webpack配置（比如webpack.common.js、webpack.dev.js），要确保HtmlWebpackPlugin注入脚本的顺序正确。在插件配置的scripts数组里，同样把jQuery放在Bootstrap之前：

  new HtmlWebpackPlugin({
    // 其他配置...
    scripts: [
      'node_modules/jquery/dist/jquery.min.js',
      'node_modules/bootstrap/dist/js/bootstrap.min.js'
    ]
  })
  

• 添加jQuery类型声明（可选但推荐）
  为了避免Angular代码中使用jQuery时出现类型报错，在src/typings.d.ts文件中添加以下声明：

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

最后，别忘了先确保已经安装了对应版本的依赖：

npm install jquery@3.3.1 bootstrap@4.0.0 --save

这样配置后，jQuery会先于Bootstrap加载，Bootstrap的JS组件就能正常找到依赖的jQuery对象，切换按钮这类功能也就可以正常工作了。

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