title: Can't resolve all parameters for BsModalService
body: <p>I'm adding a modal to my spfx angular 2 application. I was trying to follow <code>ngx-bootstrap-modal</code> through <a href="http://valor-software.com/ngx-bootstrap/#/modals" rel="noreferrer">http://valor-software.com/ngx-bootstrap/#/modals</a>. but I am getting this error:</p>
  
  <pre><code>Unhandled Promise rejection: Can't resolve all parameters for AppComponent: (?). ; Zone: &lt;root&gt; ; Task: 
  </code></pre>
  
  <p>This is what my code looks like:</p>
  
  <p>package.json</p>
  
  <pre><code>{
    "name": "our-applications",
    "version": "0.0.1",
    "private": true,
    "engines": {
      "node": "&gt;=0.10.0"
    },
    "dependencies": {
      "@angular/common": "^2.4.4",
      "@angular/compiler": "^2.4.4",
      "@angular/core": "^2.4.4",
      "@angular/forms": "^2.4.4",
      "@angular/http": "^2.4.4",
      "@angular/platform-browser": "^2.4.4",
      "@angular/platform-browser-dynamic": "^2.4.4",
      "@angular/router": "^3.4.4",
      "@angular/upgrade": "^2.4.4",
      "@microsoft/sp-client-base": "~1.0.0",
      "@microsoft/sp-client-preview": "~1.0.0",
      "@microsoft/sp-core-library": "~1.0.0",
      "@microsoft/sp-webpart-base": "~1.0.0",
      "@types/webpack-env": "&gt;=1.12.1 &lt;1.14.0",
      "angular2-modal": "^3.0.1",
      "ng2-modal": "0.0.25",
      "ngx-bootstrap": "^1.8.1",
      "reflect-metadata": "^0.1.9",
      "rxjs": "^5.0.3",
      "sp-pnp-js": "^2.0.1",
      "zone.js": "^0.7.6"
    },
    "devDependencies": {
      "@microsoft/sp-build-web": "~1.0.0",
      "@microsoft/sp-module-interfaces": "~1.0.0",
      "@microsoft/sp-webpart-workbench": "~1.0.0",
      "@types/chai": "^&gt;=3.4.34 &lt;3.6.0",
      "@types/mocha": "&gt;=2.2.33 &lt;2.6.0",
      "gulp": "~3.9.1"
    },
    "scripts": {
      "build": "gulp bundle",
      "clean": "gulp clean",
      "test": "gulp test"
    }
  }
  </code></pre>
  
  <p>my html that calls the function:</p>
  
  <pre><code> &lt;button (click)="addApp();" class="ms-Button ms-Button--primary"&gt;
              &lt;span class="ms-Button-label"&gt;Add Application&lt;/span&gt;
          &lt;/button&gt;
  </code></pre>
  
  <p>snippet of my app.component.js</p>
  
  <pre><code>import { Component, OnInit,ViewEncapsulation, ViewContainerRef } from '@angular/core';
  import { AppSettings } from './shared/app.settings';
  import { IApplicationEntity } from './shared/app.entities';
  import { BsModalService } from 'ngx-bootstrap/modal';
  import { BsModalRef } from 'ngx-bootstrap/modal/modal-options.class';
  
  export class AppComponent implements OnInit {
      bsModalRef: BsModalRef;
  
      constructor(private modalService: BsModalService) {}
  
      public addApp() {
          console.log("open the modal");
          let list = ['Open a modal with component', 'Pass your data', 'Do something else', '...'];
          this.bsModalRef = this.modalService.show(ModalContentComponent);
          this.bsModalRef.content.title = 'Modal with component';
          this.bsModalRef.content.list = list;
      }
  }
  </code></pre>
  
  <p>and this is my app.module.ts</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { ModalModule } from 'angular2-modal';
  import { BootstrapModalModule } from 'angular2-modal/plugins/bootstrap';
  import { AppComponent } from './app.component';
  import { AppSettings } from './shared/app.settings';
  import { AppLoadingComponent } from './shared/loading/app.loading';
  import { AppNotifyComponent } from './shared/notify/app.notify';
  import { BsModalService } from 'ngx-bootstrap/modal';
  
  
  @NgModule({
      imports: [BrowserModule 
      ],
      declarations: [
          AppComponent, 
          AppLoadingComponent,
          AppNotifyComponent],
      bootstrap: [AppComponent],
  })
  
  export class AppModule {}
  </code></pre>