Angular 6无法连接Bootstrap？配置后出现模块找不到错误

从你给出的错误信息来看，问题出在angular.json配置里残留了一个指向本地自定义Bootstrap路径的无效条目，导致Angular找不到对应文件。我来帮你一步步解决这个问题：

先梳理你的操作和问题点 #

你已经尝试了这些步骤引入Bootstrap：

• 执行npm安装命令：

  npm install bootstrap
  

• 尝试两种导入方式：
  1. 在angular.json的styles数组中添加npm安装的Bootstrap CSS路径
  2. 在src/style.css中通过@import导入Bootstrap CSS

但出现了如下错误：

ERROR in multi ./styles/bootstrap-4/css/bootstrap.min.css ./src/styles.css Module not found: Error: Can't resolve '/Users/kobi.ktk/Documents/3yr/UI/a4app/styles/bootstrap-4/css/bootstrap.min.css' in '/Users/kobi.ktk/Documents/3yr/UI/a4app'

这个错误明确说明：Angular正在尝试加载你项目styles/bootstrap-4/目录下的Bootstrap文件，但你是通过npm将Bootstrap安装到node_modules目录的，这个本地路径下并没有对应文件。

正确的解决步骤 #

步骤1：清理冲突的配置 #

你只需要选择一种导入方式即可，同时要删掉angular.json里的错误路径：

方案一：通过angular.json配置（推荐）

1. 打开项目根目录下的angular.json文件，找到projects -> [你的项目名] -> architect -> build -> options -> styles数组
2. 删除指向styles/bootstrap-4/css/bootstrap.min.css的错误条目，保留正确的配置：

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

   注意：确保你的全局样式文件路径是src/styles.scss（或src/styles.css），不要漏掉src/前缀。

方案二：通过全局样式文件导入

1. 先修改angular.json，只保留你的全局样式文件：

   "styles": [
     "src/styles.scss"
   ]
   

2. 打开src/styles.scss（或src/styles.css），添加以下导入语句：

   @import '~bootstrap/dist/css/bootstrap.min.css';
   

   这里的~符号是告诉Angular去node_modules目录下查找依赖包，这个写法是正确的。

步骤2：确保Bootstrap正确安装 #

如果之前的安装没有添加--save，建议重新执行安装命令，把依赖写入package.json：

npm install bootstrap --save

步骤3：重启Angular开发服务 #

修改angular.json后，必须重启ng serve才能让新配置生效，否则旧的错误路径还会被加载。

做完这些步骤后，你的Bootstrap应该就能正常在Angular 6项目中使用了。

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