Angular Can'；t解析BsModalService的所有参数

我正在向spfx angular 2应用程序添加一个模式。我一直在努力遵循ngx引导模式。但我得到了这个错误：

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

这是我的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 {}

---

通过快速浏览您的代码，我注意到您的AppModule中有BSModalService的ES6 import语句，但它没有导入到AppModule中。请将BSModalService添加到AppModule导入中，如下所示

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

---

在

app.module.ts

中，您没有将

ModalModule

添加到

imports数组

，解决方案应该是从

ngx引导

导入

ModalModule

，并将其添加到导入数组中

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

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

请参阅

---

似乎是一个迟来的答案，但希望它能帮助解决您的问题。

发布此消息，因为它可能会帮助他人

如果您在应用程序中创建了不同的NGModule，请不要忘记在这些模块中导入

ModalModule

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

@NgModule({
  imports: [    
    ModalModule.forRoot()    
  ],
  declarations: [
    ExampleComponent,    
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class ExampleModule {}

---

你在使用system.config吗？嗨@Sajeetharan不，我的应用程序没有system.config。抱歉，我实际上是angular js的新手。嗨，Bala，当我在导入中添加它时，我遇到了以下错误：[SPWebPartErrorCode.ScriptLoadError]：：无法加载web部件web部件。我们的应用程序web部件。dba29c21-45f3-4bbe-ab5e-6e0bc375f378，错误：**未能加载组件“0a847cdc-0309-4af4-a025-d084e8e66554”（我们的应用程序web部件）。原始错误：**未能从组件“0a847cdc-0309-4af4-a025-d084e8e66554”（我们的应用程序Web部件）加载入口点。由于以下原因导致的脚本资源：{1}。CALLSTACK:：SPWebPartError.SPError[作为构造函数]处出错是，已解决。谢谢

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

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

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

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

@NgModule({
  imports: [    
    ModalModule.forRoot()    
  ],
  declarations: [
    ExampleComponent,    
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class ExampleModule {}