Angular新手集成Bootstrap 4遇样式问题：ng-bootstrap CSS目录不存在

Hey there! Let's fix this Bootstrap styling issue you're facing with Angular and ng-bootstrap. I see where the problem might be—let's break it down step by step:

First, a key clarification: ng-bootstrap doesn't include Bootstrap CSS #

ng-bootstrap is just the Angular wrapper for Bootstrap components—it doesn't ship with Bootstrap's own CSS files. So you need to make sure you've installed the actual Bootstrap package, not just ng-bootstrap. The missing CSS folder in ng-bootstrap is completely normal, by the way!

Here's the fix for your styling issue: #

1. Install the official Bootstrap package
   You likely missed this critical step. Run this command in your project root:

   npm install bootstrap --save
   

2. Fix the CSS path in your config file
   You wrote "../node_modules/@bootstrap/dist/css/bootstrap.min.css"—that's the wrong package name! The official Bootstrap package is named bootstrap, not @bootstrap. Update the path to:

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

   Note: If you're using Angular 6 or later, your config file is angular.json instead of .angular-cli.json, and you can use the shorter path "node_modules/bootstrap/dist/css/bootstrap.min.css" without the ../.

3. Confirm your ng-bootstrap setup is correct
   Your app.module.ts setup looks right—importing NgbModule and adding NgbModule.forRoot() (for Angular versions before 9; Angular 9+ just needs NgbModule in imports) is the proper way to integrate it. No need to worry about the "incomplete dist subdirectory" either—ng-bootstrap's dist folder only contains the Angular component code, not CSS.

Full correct setup recap (to avoid future issues): #

• Install both packages at once:

  npm install bootstrap @ng-bootstrap/ng-bootstrap --save
  

• Import NgbModule in app.module.ts:

  import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
  
  @NgModule({
    declarations: [AppComponent],
    imports: [
      BrowserModule,
      NgbModule.forRoot() // Omit `.forRoot()` if using Angular 9+
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

• Add Bootstrap CSS to your config's styles array:
  For .angular-cli.json (Angular 5 and earlier):

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

  For angular.json (Angular 6+):

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

After making these changes, restart your Angular dev server (ng serve again) and the Bootstrap styles should load correctly!

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