How to import/load ng-bootstrap to angular5 project?

Question

Why I can't load ng-bootstrap on my angular project ? does anyone experience the same thing ?

Thank you in advance

this is 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 { }

From the image you included, it looks like you are able to install it, you have the same version as here: https://ng-bootstrap.github.io/#/home, so you have to clarify your question, otherwise you will get too many down votes — HDJEMAI, Dec 23 '17 at 22:39
after install finish, i try to write the code, then the bootstrap can't show. — Fahmi Hidayatullah, Dec 23 '17 at 22:43
You have to include your code, and errors you have, people cannot figure out what you have. — HDJEMAI, Dec 23 '17 at 22:44
you have to include source code, not as images. Look at other questions asked in this site. — HDJEMAI, Dec 23 '17 at 22:46
Did you also install [Bootstrap CSS](http://getbootstrap.com/), and imported it in your project (for example, with `import "bootstrap/dist/css/bootstrap.min.css";` in vendor.ts)? — ConnorsFan, Dec 23 '17 at 23:32

score 3 · Accepted Answer · answered Dec 24 '17 at 06:34

Judging from your code, you may have missed the NgbModule.forRoot() in the imports array in app.module.ts

In order to get ng-bootstrap to work in Angular, you have to do the following things:

Install Bootstrap npm install --save bootstrap@4.0.0-beta.2
Import Bootstrap into either
- styles.css using @import "~bootstrap/dist/css/bootstrap.min.css";, or
- .angular-cli.json via the styles property:
  
  "styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css" ],
Install ng-bootstrap npm install --save @ng-bootstrap/ng-bootstrap
Import the ng-boostrap module into app.module.ts:

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

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

The install process is well documented in ng-boostrap's Getting Started Page

How to import/load ng-bootstrap to angular5 project?

1 Answers1