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:

npm install [email protected]
Navigate to the root /bootstrap directory and run npm install to install local dependencies listed in package.json.
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?

Verify the index.html file includes the .css file of bootstrap — galvan
– galvan, Commented Sep 22, 2016 at 17:33
Possible duplicate of How do you add app wide CSS files using the Angular CLI? — pkozlowski.opensource
– pkozlowski.opensource, Commented Sep 22, 2016 at 18:41
@pkozlowski.opensource my case is different, I am using webpack instead of systemjs — ljieyao
– ljieyao, Commented Sep 25, 2016 at 11:33

Anderson Silva · Accepted Answer · 2017-01-24 23:49:29Z

4

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

answered Jan 24, 2017 at 23:49

Anderson Silva

3422 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

lighter · Accepted Answer · 2017-03-31 07:04:33Z

4

I have figured out. It is actually stated in angular-cli github page as well, in the section of Global Libray Installation, as follow:

Some javascript libraries need to be added to the global scope, and loaded as if they were in a script tag. We can do this using the apps[0].scripts and apps[0].styles properties of angular-cli.json.

As an example, to use Boostrap 4 this is what you need to do:

First install Bootstrap from npm:

$ npm install bootstrap@next

Then add the needed script files to to apps[0].scripts.

"scripts": [
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/tether/dist/js/tether.js",
  "../node_modules/bootstrap/dist/js/bootstrap.js"
],

Finally add the Bootstrap CSS to the apps[0].styles array:

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

Restart ng serve if you're running it, and Bootstrap 4 should be working on your app.

edited Mar 31, 2017 at 7:04

lighter

2,8243 gold badges43 silver badges61 bronze badges

answered Sep 25, 2016 at 11:32

ljieyao

2091 gold badge3 silver badges13 bronze badges

2 Comments

AlignedDev Over a year ago

scripts can be "../node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js" from ng-bootstrap.github.io/#/getting-started at least as of today (11/30/2016)

pkozlowski.opensource Over a year ago

you do NOT need jquery.js, tether.js nor bootstrap.js when using ng-bootstrap - the whole point of the ng-bottstrap library is to replace those scripts with native Angular 2 code.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related