Angular项目安装Bootstrap异常：提示成功却找不到对应文件夹

Hey there! Let's break down what's going on here and fix your Bootstrap issue step by step.

First: Understand the Warnings #

Let's start with those npm warnings to clear up confusion:

• Codelyzer Peer Dependency Warnings: Your codelyzer@3.2.0 is outdated—it only supports Angular 2.x/4.x, but you're using Angular 5.x. This is a separate issue from Bootstrap, but we'll fix it too.
• Fsevents Warning: Don't worry about this one! fsevents is a macOS-only optional dependency, so it's totally normal for npm to skip it on Windows.

Why Can't You Find the Bootstrap Folder? #

Even though you see the warnings, your package.json already lists "bootstrap": "^3.3.7" in dependencies—this means the installation technically succeeded. The missing folder is likely due to a partial install or npm cache glitch. Here's how to fix it:

Step 1: Clean Up and Reinstall Dependencies #

1. First, delete your node_modules folder and package-lock.json file (if it exists) from your project root.
2. Clear the npm cache to eliminate any corrupted files:

   npm cache clean --force
   

3. Reinstall all dependencies, including Bootstrap:

   npm install
   

After this, you should see the bootstrap folder inside node_modules.

Step 2: Fix the Codelyzer Peer Dependency Warnings #

To get rid of those codelyzer warnings, upgrade it to a version compatible with Angular 5.x. Run this command:

npm install --save-dev codelyzer@^4.0.0

This version of codelyzer supports Angular 5+, so the peer dependency warnings will disappear.

Finally: Configure Angular to Use Bootstrap Styles #

Installing Bootstrap isn't enough—you need to tell Angular to load its CSS. Choose one of these two methods:

Method 1: Add to .angular-cli.json (Since You're Using Angular CLI 1.5.0) #

Open your .angular-cli.json file, find the styles array, and add the path to Bootstrap's CSS:

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

Method 2: Import in Global Stylesheet #

Open src/styles.css (or styles.scss if you use Sass) and add this import line:

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

Once you've done this, restart your Angular dev server with ng serve, and Bootstrap styles will work in your project!

内容的提问来源于stack exchange，提问作者Mehdi Ben Hamida