Can't resolve all parameters for BsModalService

问题

I'm adding a modal to my spfx angular 2 application. I was trying to follow ngx-bootstrap-modal through http://valor-software.com/ngx-bootstrap/#/modals. but I am getting this error:

Unhandled Promise rejection: Can't resolve all parameters for AppComponent: (?). ; Zone: <root> ; Task:

This is what my code looks like:

package.json

{
  "name": "our-applications",
  "version": "0.0.1",
  "private": true,
  "engines": {
    "node": ">=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": ">=1.12.1 <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": "^>=3.4.34 <3.6.0",
    "@types/mocha": ">=2.2.33 <2.6.0",
    "gulp": "~3.9.1"
  },
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  }
}

my html that calls the function:

 <button (click)="addApp();" class="ms-Button ms-Button--primary">
            <span class="ms-Button-label">Add Application</span>
        </button>

snippet of my app.component.js

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;
    }
}

and this is my app.module.ts

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 {}

回答1:

From your app.module.ts, you didn't add ModalModule to imports array, the solution should be import ModalModule from ngx-bootstrap and add it to your imports array.

import { ModalModule } from 'ngx-bootstrap';
// or
import { ModalModule } from 'ngx-bootstrap/modal';

imports: [BrowserModule, ModalModule.forRoot()],
                         ^^^^^^^^^^^^^^^^^^^^^   mention here

Refer Plunker DEMO.

Seems a late answer but hope it'll help solve your problem.

回答2:

From quick glance of your code I notice that you have ES6 import statement for BSModalService in your AppModule but it is not imported into your angular AppModule. Please add BSModalService into AppModule imports as shown below.

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, BsModalService 
],
declarations: [
    AppComponent, 
    AppLoadingComponent,
    AppNotifyComponent],
bootstrap: [AppComponent],
})

export class AppModule {}

来源：https://stackoverflow.com/questions/45704518/cant-resolve-all-parameters-for-bsmodalservice

标签

angular

typescript

bootstrap-modal