UNPKG

ng2-bootstrap-base-modified

Version:

Native Angular Bootstrap Components Typeahead modified

81 lines (60 loc) 2 kB
### How to use ng2-bootstrap in Angular2 with AoT compilation using ngc and rollup The compilation process is described on the official Angular2 website here: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html Note that you also have to include bootstrap CSS from the official Bootrstrap site or Bootstrap CDN in your index.html HEAD section. #### 1) Install `ng2-bootstrap` ```bash npm install ng2-bootstrap bootstrap --save ``` #### 2) Edit Angular 2 module Open the module file where you want to include ng2-bootstrap (most probably `app.module.ts`) and import either specific ng2-bootstrap modules by listing them in the import statement and then in the import array of the Angular 2 module ```typescript import { AlertModule } from 'ng2-bootstrap/alert'; import { ModalModule } from 'ng2-bootstrap/modal'; ... @NgModule({ ... imports: [AlertModule.forRoot(), ModalModule.forRoot(), ... ], ... }) ``` **NOT RECOMMENDED**: or use Ng2BootstrapModule to import all of the modules at once: ```typescript import { Ng2BootstrapModule } from 'ng2-bootstrap'; ... @NgModule({ ... imports: [Ng2BootstrapModule.forRoot(), ... ], ... }) ``` #### 3) Edit rollup configuration (rollup-config.js) You have to use CommonJS rollup plugin, which you should be using anyway due to RxJS. If for some reason not, install it: ```bash npm install rollup-plugin-commonjs --save --dev ``` Then you have to import the CommonJS plugin, include it in the plugins array and add ng2-bootstrap to the list of modules: ```javascript ... import commonjs from 'rollup-plugin-commonjs'; ... //paths are relative to the execution path export default { ... plugins: [ ... commonjs({ include: [ 'node_modules/rxjs/**', 'node_modules/ng2-bootstrap/**' ] }), ... ] } ``` #### 4) Run compilation the standard way e.g. ```bash ngc -p tsconfig-aot.json rollup -c rollup-config.js ```