@angular/cli@1.6.3与bootstrap@4.0.0-beta.3兼容问题咨询

我之前也踩过这个版本冲突的坑，确实Bootstrap 4.0.0-beta.3和Angular CLI 1.6.3的默认依赖配置不兼容——核心原因是beta.3对Popper.js的依赖方式和版本要求发生了变化，而老版本的Angular CLI没处理好这个适配。下面几个方案可以帮你搞定：

方案一：手动指定兼容的Popper.js版本并配置脚本 #

这是最直接的修复方式，调整依赖版本后修改Angular CLI的配置即可：

• 先安装Bootstrap beta.3和适配的Popper.js版本：

  npm install bootstrap@4.0.0-beta.3 popper.js@1.12.9 --save
  

• 打开项目根目录的angular-cli.json，找到apps[0].styles数组，添加Bootstrap的CSS文件路径：

  "styles": [
    "styles.css",
    "node_modules/bootstrap/dist/css/bootstrap.min.css"
  ]
  

• 同样在apps[0].scripts数组里添加Popper和Bootstrap的JS文件（注意顺序，Popper必须在Bootstrap前面）：

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

保存配置后重启项目，应该就能正常启动了。

方案二：用自定义Webpack配置修复依赖解析 #

如果方案一没解决问题，可能是Webpack对Popper.js的模块解析存在异常，我们可以扩展Angular CLI的Webpack配置来修复：

1. 安装适配Angular 5（对应CLI 1.6.3版本）的自定义Webpack构建工具：

   npm install @angular-builders/custom-webpack@5 --save-dev
   

2. 修改angular-cli.json里的构建配置，替换默认builder并指定自定义配置文件：

   "defaults": {
     "build": {
       "builder": "@angular-builders/custom-webpack:browser",
       "customWebpackConfig": {
         "path": "./extra-webpack.config.js"
       }
     },
     "serve": {
       "builder": "@angular-builders/custom-webpack:dev-server"
     }
   }
   

3. 在项目根目录创建extra-webpack.config.js，添加Popper.js的别名解析规则：

   module.exports = {
     resolve: {
       alias: {
         'popper.js': 'popper.js/dist/umd/popper.js'
       }
     }
   };
   

这样Webpack就能正确识别Bootstrap需要的Popper.js模块了。

方案三：绕过本地依赖，用CDN引入Bootstrap #

如果不想折腾本地依赖，直接用CDN引入是快速解决冲突的捷径：
打开src/index.html，在<head>标签内添加Bootstrap的CSS链接，在<body>末尾添加Popper和Bootstrap的JS链接：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0-beta.3/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0-beta.3/dist/js/bootstrap.min.js"></script>

这种方式完全避开了本地依赖冲突，适合快速验证功能。

如果以上方案都没效果，那可能得考虑升级Angular CLI到1.7.x及以上版本，但如果项目有特殊原因不能升级，上面的方法应该能覆盖大部分场景。

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