Angular CLI集成Bootstrap 4失败：执行ng serve遇编译错误

Hey there, let’s work through that frustrating compilation error you’re getting when running ng serve after installing Bootstrap 4. I’ve dealt with this exact issue a few times, so let’s break down the most common fixes step by step:

1. Ensure All Required Dependencies Are Installed #

Bootstrap 4 relies on jQuery and Popper.js to work properly—this is a super common oversight. Run this command to install all three packages:

npm install bootstrap jquery popper.js --save

2. Verify Your Angular Configuration File #

Double-check your angular.json (or .angular-cli.json if you’re on an older Angular CLI version) to make sure you’ve added Bootstrap’s files correctly:

• Locate the styles array under build → options, and add:

  "node_modules/bootstrap/dist/css/bootstrap.min.css"
  

• Locate the scripts array in the same section, and add these in this exact order (Popper.js needs to load before Bootstrap):

  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/popper.js/dist/umd/popper.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
  

3. Clear Cache and Rebuild #

Sometimes cached files can cause weird compilation issues. Run these commands to reset things:

# Clear Angular CLI cache
ng clean

# If using an older CLI version, use npm cache instead
npm cache clean --force

# Reinstall dependencies
npm install

# Restart the dev server
ng serve

4. Fix CSS/PostCSS Loader Version Compatibility #

If the error persists, it might be a version mismatch between css-loader/postcss-loader and your Angular CLI version. Try installing compatible versions:

# Uninstall current versions
npm uninstall css-loader postcss-loader

# Install versions known to work with Angular 2
npm install css-loader@2.1.1 postcss-loader@3.0.0 --save-dev

5. Fallback: Import Bootstrap Directly in styles.css #

If configuring angular.json isn’t working, try importing Bootstrap’s CSS directly into your global src/styles.css file:

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

The ~ tells Webpack to look for the file in your node_modules folder.

内容的提问来源于stack exchange，提问作者Web Develop Wolf