Error on load ngs-boostrap using angular2

I'm trying to create a menu using the dropdown component from ng2-boostrap. When the index is accessed I get this error:

Failed to load resource: the server responded with a status of 404 (Not Found)

Steps until now:

1) npm install ng2-bootstrap --save. The folder ng2-bootstrap was created under node_modules

2) on app.module.ts I tried both with Ng2BootstrapModule and DropdownModule individually

import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap';
import { DropdownModule } from 'ng2-bootstrap/components/dropdown';

 @NgModule({
 imports: [ BrowserModule, Ng2BootstrapModule or DropdownModule ]....

3) on my template html

 <div class="dropdown" dropdown>
    <button class="btn btn-primary" dropdown-open>My Heroes</button>
        <ul class="dropdownMenu">
        <li><a href="#">Badman</a></li>
        <li><a href="#">Sadman</a></li>
        <li><a href="#">Lieman</a></li>
        </ul>
</div>

I tried the demo on the https://valor-software.com/ng2-bootstrap/#/dropdownsbut the result is the same.

4)package.json in the dependencies have both moment and ng2-boostrap

"moment": "^2.15.1",
"ng2-bootstrap": "^1.1.5",

Maybe the error could be on the path of the ng2-boostrap, Already tried with the tag

<script src="node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script>

The error is gone, but the style of the dropdown still doesn't load. The browser renders the button and the list separately. And in the demos and quick start the tag isn't mentioned so I guess its wrong anyway.

Solution

There are the following steps:

1) Install ng2-bootstrap and moment packages:

npm install ng2-bootstrap moment --save

2) Configure systemjs.config.js

map: {
  ...
  'ng2-bootstrap': 'npm:ng2-bootstrap',
  'moment': 'npm:moment/moment.js'
},
packages: {
  ...
  'ng2-bootstrap': {
    defaultExtension: 'js'
  }
}

3) Import DropdownModule to your module:

import { DropdownModule } from 'ng2-bootstrap/ng2-bootstrap';

@NgModule({
  imports:      [ BrowserModule, DropdownModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

You can also use Ng2BootstrapModule instead

4) Add the bootstrap css link to your index.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

5) Use it in your template html like (сheck this carefully):

<div class="dropdown" dropdown>
  <button class="btn btn-primary" dropdownToggle>My Heroes</button>
  <ul class="dropdown-menu">
    <li><a href="#">Badman</a></li>
    <li><a href="#">Sadman</a></li>
    <li><a href="#">Lieman</a></li>
  </ul>
</div>

So the completed example you can see on the Plunker