Angular CLI搭配Angular 5.2.0与ng-bootstrap无法正常生效问题

Hey there! Let's figure out why your Bootstrap styles aren't loading even though your Angular app with ng-bootstrap has no errors. The most common culprit here is a simple but easy-to-miss step: ng-bootstrap doesn't include Bootstrap's CSS files by default—it only provides Angular-friendly component wrappers. Here's how to fix it:

1. First, Install Bootstrap CSS #

If you haven't already, you need to install the Bootstrap package itself (ng-bootstrap depends on it for styles):

npm install bootstrap --save
# Or use Yarn if that's your preference
yarn add bootstrap

2. Import Bootstrap CSS into Your Project #

You have two reliable ways to add the styles globally:

Option 1: Use angular.json (Global Build Configuration) #

Open your project's root angular.json file, find the build → options → styles array, and add the path to Bootstrap's minified CSS:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css" // Keep your global styles here to override Bootstrap if needed
]

⚠️ Important: After editing angular.json, you'll need to restart your ng serve dev server—changes to this file don't hot-reload.

Option 2: Import in Global Styles File #

If you're using plain CSS, add this line to src/styles.css:

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

If you're using SCSS (great for customizing Bootstrap variables later), add this to src/styles.scss:

@import "../node_modules/bootstrap/scss/bootstrap";

This method doesn't require a server restart—save the file, and your app should refresh automatically.

3. Verify the Styles Are Loading #

Once you've set up the import, open your browser's DevTools (F12), go to the Elements tab, and check the <head> section. You should see a link to the Bootstrap CSS file. If it's missing, double-check the file path (make sure node_modules is in your project root, and there are no typos).

4. Quick Check: Ensure ng-bootstrap Is Properly Configured #

While you said there are no errors, it's worth confirming your module setup is correct:

• For traditional NgModules: Import NgbModule in your app.module.ts:

  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
  
  import { AppComponent } from './app.component';
  
  @NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, NgbModule],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

• For Angular 14+ Standalone Components: Import specific ng-bootstrap component modules directly in your component:

  import { Component } from '@angular/core';
  import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap';
  
  @Component({
    selector: 'app-root',
    standalone: true,
    imports: [NgbAlertModule],
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'your-app-name';
  }
  

That's it! The missing Bootstrap styles are almost certainly because you didn't import the CSS file. Follow these steps, and your ng-bootstrap components should start rendering with proper styling.

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