How to use ng-bootstrap with AngularJS 2 (using angular-cli v1b15)?

Question

I have been trying to use ng-bootstrap in my Angular 2 project following the documentation on the ng-bootstrap official site.

What I have done are as follow:

1. npm install [email protected]
2. Navigate to the root /bootstrap directory and run npm install to install local dependencies listed in package.json.
3. Navigate to the root project again and run npm install --save @ng-bootstrap/ng-bootstrap

After that, I import in the module as follows:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { routing } from './app.routing';

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


import { AppComponent } from './app.component';
import { PageModule } from "./page/page.module";

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        NgbModule,
        PageModule,
        routing
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {
}

However, I am still unable to use the bootstrap styles, such as pull-left, in my project.

For information, I am using angular-cli v1.0.0-beta.15 with webpack.

How can I solve this issue?

Answer 1

On your imports for the decorator you need to call ngBootstrap like this

NgbModule.forRoot()

Example AppModule

import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { routes } from './app.routes';

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

@NgModule({
  declarations: [
 AppComponent,
],
imports: [
  BrowserModule,
  FormsModule,
  HttpModule,
  RouterModule.forRoot(routes), 
  // Add This
  NgbModule.forRoot()
],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }