如何 import/load ng-bootstrap 到 angular5 项目？

Question

为什么我无法在我的 angular 项目中加载 ng-bootstrap？有没有人经历过同样的事情？

提前致谢

这是app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { FooterComponent } from './footer/footer.component';


@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    FooterComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

从你的代码来看，你可能错过了app.module.ts

中导入数组中的NgbModule.forRoot()

为了让 ng-bootstrap 在 Angular 中工作，你必须做以下事情：

1. 安装Bootstrapnpm install --save bootstrap@4.0.0-beta.2

2. 将 Bootstrap 导入

   • styles.css 使用 @import "~bootstrap/dist/css/bootstrap.min.css"; 或

   • .angular-cli.json 通过样式 属性:

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

3. 安装 ng-bootstrap npm install --save @ng-bootstrap/ng-bootstrap

4. 将ng-boostrap模块导入app.module.ts:

   import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

   @NgModule({ declarations: [AppComponent, ...], imports: [NgbModule.forRoot(), ...], bootstrap: [AppComponent] }) export class AppModule { }

安装过程在 ng-boostrap's Getting Started Page

中有详细记录