Skip to content

Commit a1f563e

Browse files
SmallhillCZvalorkin
authored andcommitted
feat(docs): Add "How to use with AoT compilation" (#1273)
closes #1270, closes #1188
1 parent 7b0d98a commit a1f563e

File tree

2 files changed

+82
-1
lines changed

2 files changed

+82
-1
lines changed

README.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,9 @@ You will need bootstrap styles
4242
- `system.js` (and [angular2 quickstart](https://angular.io/docs/ts/latest/quickstart.html)) please checkout [sample repository](https://github.com/valor-software/angular2-quickstart)
4343
- `webpack` you can view our demo page [source code](https://github.com/valor-software/ng2-bootstrap/tree/development/demo)
4444
- `plnkr` sample available [here](http://bit.ly/ng2-bootstrap-plnkr)
45-
45+
- `AoT using ngc and rollup` please refer to [ng2-bootstrap-with-aot](https://github.com/valor-software/ng2-bootstrap/tree/development/docs/getting-started/aot.md)
46+
+ - `AoT using ngc and rollup` please refer to [ng2-bootstrap-with-aot](https://github.com/valor-software/ng2-bootstrap/tree/development/docs/getting-started/aot.md)
47+
+
4648
# Usage & Demo
4749

4850
Main source of API documentation and usage scenarious available here:

docs/getting-started/aot.md

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
### How to use ng2-bootstrap in Angular2 with AoT compilation using ngc and rollup
2+
3+
The compilation process is described on the official Angular2 website here: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html
4+
5+
Note that you also have to include bootstrap CSS from the official Bootrstrap site or Bootstrap CDN in your index.html HEAD section.
6+
7+
#### 1) Install `ng2-bootstrap`
8+
9+
```bash
10+
npm install ng2-bootstrap bootstrap --save
11+
```
12+
13+
#### 2) Edit Angular 2 module
14+
15+
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
16+
17+
```typescript
18+
import { AlertModule, ModalModule } from 'ng2-bootstrap/ng2-bootstrap';
19+
...
20+
21+
@NgModule({
22+
...
23+
imports: [AlertModule, ModalModule, ... ],
24+
...
25+
})
26+
```
27+
28+
or use Ng2BootstrapModule to import all of the modules at once:
29+
30+
```typescript
31+
import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap';
32+
...
33+
34+
@NgModule({
35+
...
36+
imports: [Ng2BootstrapModule, ... ],
37+
...
38+
})
39+
```
40+
41+
#### 3) Edit rollup configuration (rollup-config.js)
42+
43+
You have to use CommonJS rollup plugin, which you should be using anyway due to RxJS. If for some reason not, install it:
44+
45+
```bash
46+
npm install rollup-plugin-commonjs --save --dev
47+
```
48+
49+
Then you have to import the CommonJS plugin, include it in the plugins array and add ng2-bootstrap to the list of modules:
50+
51+
```javascript
52+
...
53+
import commonjs from 'rollup-plugin-commonjs';
54+
...
55+
56+
//paths are relative to the execution path
57+
export default {
58+
...
59+
plugins: [
60+
...
61+
commonjs({
62+
include: [
63+
'node_modules/rxjs/**',
64+
'node_modules/ng2-bootstrap/**'
65+
]
66+
}),
67+
...
68+
]
69+
}
70+
```
71+
72+
#### 4) Run compilation the standard way
73+
74+
e.g.
75+
76+
```bash
77+
ngc -p tsconfig-aot.json
78+
rollup -c rollup-config.js
79+
```

0 commit comments

Comments
 (0)