How to use ng-bootstrap with AngularJS 2 (using angular-cli v1b15)?
Solution 1
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.
Solution 2
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 { }
Comments
-
ljieyao almost 2 years
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?
-
AlignedDev over 7 yearsscripts 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 7 yearsyou 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.