How To Add Stuff To Angular-Cli Without Pulling Your Hair Out

How To Add Packages To Angular-Cli Without Pulling Your Hair Out

or Adding/Including a Bootstrap to Angular2-Cli Project

You need a few things.

ng2-bootstrap give us some html elements to work with, but you still need to pull actual Bootstrap's CSS.

These steps pull it in using the full npm package. It also explicitly references the files. If you know a better way to bundle this I'd love to hear it.

Install via npm

npm install ng2-bootstrap --save

Include in build.

vendorNpmFiles: [
  // ...
  'ng2-bootstrap/**/*.js',
  // ...
]

Map the typescript definition path

const map: any = {
  // ...
  'ng2-bootstrap': 'vendor/ng2-bootstrap'
  // ...
};

Configure the package for use in project

const packages: any = {
  // ...
  'ng2-bootstrap': { 'format': 'cjs', 'defaultExtension': 'js', 'main': 'ng2-bootstrap.js' }
  // ...
};

Use in a typescript component

import {AlertCompoment} from 'ng2-bootstrap/ng2-bootstrap';
// OR... import { AlertComponent } from 'ng2-bootstrap/components/alert';

@Component({
  // ...
  directives: [AlertComponent],
  template: '<alert>This is an Alert!</alert>'
  // ...
})

Add the bootstrap css

Install via npm
Would be nice just to grab the css, but we will only include the stuff we really needd
```
npn install bootstrap --save
```

Include in build

vendorNpmFiles: [
  // ...
  'bootstrap/dist/css/*.+(min.css|min.css.map)',
  // ...
]

Add a reference to the page

<link href="vendor/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">