如何为Angular 5添加Bootstrap 4组件？新手求助高效方案及参考文章

Hey there! As someone who's worked with Angular and Bootstrap for years, I totally get your concern about performance—especially when you're just starting out. Let's walk through two reliable, efficient ways to add Bootstrap 4 to your Angular 5 project, plus some tips to keep things running smoothly.

Method 1: Use Native Bootstrap with Dependencies #

This is the straightforward approach if you want to leverage all of Bootstrap's native classes and JavaScript components. Follow these steps:

• First, install the required packages via npm:

  npm install bootstrap@4 jquery popper.js --save
  

• Next, open your .angular-cli.json file (Angular 5 uses this instead of the later angular.json) and update the styles and scripts arrays:
  • In the styles array, add the path to Bootstrap's minified CSS:

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

  • In the scripts array, add jQuery, Popper.js, and Bootstrap's JS in this exact order (Bootstrap depends on the first two):

    "scripts": [
      "node_modules/jquery/dist/jquery.min.js",
      "node_modules/popper.js/dist/umd/popper.min.js",
      "node_modules/bootstrap/dist/js/bootstrap.min.js"
    ]
    

• Restart your Angular development server (ng serve) and you're ready to go! You can now use any Bootstrap class, like <div class="container"><button class="btn btn-primary">Submit</button></div>.

Performance Note: We're using minified files (.min.css/.min.js) which are already compressed. When you build for production with ng build --prod, Angular will optimize these assets further, so you won't notice any significant performance hit.

Method 2: Use ng-bootstrap (Angular-Native Bootstrap Components) #

If you want a more Angular-friendly approach that avoids jQuery entirely (great for performance and aligning with Angular's best practices), ng-bootstrap is perfect. It's a set of Bootstrap components built purely with Angular, no external dependencies needed.

Here's how to set it up:

• Install ng-bootstrap and Bootstrap 4:

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

• Open your AppModule (usually src/app/app.module.ts) and import NgbModule:

  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.forRoot() // Initialize ng-bootstrap
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

• Still add Bootstrap's CSS to your .angular-cli.json styles array (same as Method 1):

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

• Now you can use ng-bootstrap's Angular components, like:

  <ngb-alert [dismissible]="false">Hello, ng-bootstrap!</ngb-alert>
  

Performance Advantage: Since there's no jQuery or Popper.js dependency, your bundle size is smaller, and components work seamlessly with Angular's change detection system. Plus, Angular's tree-shaking will remove any unused ng-bootstrap components during production builds, making your app even leaner.

• Always build for production with ng build --prod—this enables code minification, tree-shaking, and other optimizations that drastically improve runtime performance.
• If you only need a subset of Bootstrap's styles, consider using Sass to customize and trim down the CSS. Install node-sass first (npm install node-sass --save-dev), then create a custom styles.scss file:

  // Override Bootstrap variables first (optional)
  $primary: #2c3e50;
  $secondary: #ecf0f1;
  
  // Import only the Bootstrap components you need
  @import '~bootstrap/scss/functions';
  @import '~bootstrap/scss/variables';
  @import '~bootstrap/scss/mixins';
  @import '~bootstrap/scss/buttons';
  @import '~bootstrap/scss/grid';
  

  This way, you don't load unused CSS, reducing your app's load time.

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