Angular 4集成Bootstrap 4时npm start报错：无法确定@angular/compiler-cli与typescript版本

这个错误本质是你的npm依赖环境出现了损坏，导致Angular CLI无法正确识别@angular/compiler-cli和typescript的版本信息，按照下面的步骤一步步操作就能解决：

1. 检查package.json的依赖配置
   打开你的package.json文件，确认devDependencies中确实包含@angular/compiler-cli和typescript，而且版本要和你的Angular 4版本匹配（Angular 4对应的TypeScript版本建议在2.3.x~2.5.x之间，@angular/compiler-cli版本要和@angular/core保持一致）。示例配置如下：

   "devDependencies": {
     "@angular/compiler-cli": "^4.4.7",
     "typescript": "^2.4.2",
     // 其他开发依赖...
   }
   

   如果缺少这两个依赖，直接手动添加后保存文件。

2. 清理损坏的依赖文件
   先关闭当前运行的npm进程，然后执行以下操作：

   • 删除node_modules文件夹：
     • Linux/Mac终端：rm -rf node_modules
     • Windows命令行：rmdir /s /q node_modules
     • 或者直接在文件管理器中手动删除该文件夹
   • 删除package-lock.json文件（如果项目根目录存在的话）：
     • Linux/Mac终端：rm package-lock.json
     • Windows命令行：del package-lock.json

3. 重新安装所有依赖
   在项目根目录下运行：

   npm install
   

   等待命令执行完成，确保没有报错。

4. 重新启动项目
   运行npm start，此时应该能正常启动Angular项目了。

另外，顺便提一下Bootstrap 4的完整集成步骤（避免后续踩坑）：
Bootstrap 4依赖jQuery和Popper.js，所以需要先安装这三个包：

npm install bootstrap@4 jquery popper.js --save

然后打开angular-cli.json（Angular 4使用的是这个配置文件，不是Angular 6+的angular.json），在styles数组中添加Bootstrap的CSS路径，scripts数组中添加jQuery、Popper.js和Bootstrap的JS路径：

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

保存配置后重启项目，就能正常使用Bootstrap 4的样式和组件了。

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