Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add "How to use with AoT compilation" #1273

Merged
merged 2 commits into from
Dec 1, 2016
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,9 @@ You will need bootstrap styles
- `system.js` (and [angular2 quickstart](https://angular.io/docs/ts/latest/quickstart.html)) please checkout [sample repository](https://github.com/valor-software/angular2-quickstart)
- `webpack` you can view our demo page [source code](https://github.com/valor-software/ng2-bootstrap/tree/development/demo)
- `plnkr` sample available [here](http://bit.ly/ng2-bootstrap-plnkr)

- `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)
+ - `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)
+
# Usage & Demo

Main source of API documentation and usage scenarious available here:
Expand Down
79 changes: 79 additions & 0 deletions docs/getting-started/aot.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
### 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, ModalModule } from 'ng2-bootstrap/ng2-bootstrap';
...

@NgModule({
...
imports: [AlertModule, ModalModule, ... ],
...
})
```

or use Ng2BootstrapModule to import all of the modules at once:

```typescript
import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap';
...

@NgModule({
...
imports: [Ng2BootstrapModule, ... ],
...
})
```

#### 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
```