模块“DynamicTestModule”导入的意外值“ModalModule”

问题描述

我正在尝试测试使用 ngx-bootstrap 的 modal 指令的 MyComponent （如 https://valor-software.com/ngx-bootstrap/#/modals#directive-section 所示）。 组件本身可以完美运行，但是在尝试对其进行测试时，我收到此错误：

Unhandled Promise rejection: Unexpected value 'ModalModule' imported by the module 'DynamicTestModule'. Please add an @NgModule annotation.

这是我的 Testbed 的样子：

Testbed.configureTestingModule({
  imports: [
    HttpClientTestingModule,RouterTestingModule.withRoutes([]),ModalModule.forRoot()
  ],declarations: [MyComponent],providers: [],schemas: [ NO_ERRORS_SCHEMA ]
}).compileComponents().then(() => {
  fixture = Testbed.createComponent(MyComponent);
  component = fixture.componentInstance;
});

这就是在 MyComponent 上设置模态的方式：

export class MyComponent implements {
  @ViewChild('confirmDeleteModal')
  confirmDeleteView: ModalDirective;

  constructor() {} // empty constructor just to illustrate the fact that there are no other dependencies

作为参考，这是我模板的相关部分：

<div bsModal #confirmDeleteModal="bs-modal" class="modal fade" role="dialog"> ... </div>

这是我已经尝试过的：

从 ModalModule.forRoot() 的列表中删除 imports，然后给我这个错误：

Unhandled Promise rejection: Export of name 'bs-modal' not found!

将 ModalDirective 添加到 declarations 的列表中：

Unhandled Promise rejection: R3InjectorError(DynamicTestModule)[ComponentLoaderFactory -> ComponentLoaderFactory]: 
  NullInjectorError: No provider for ComponentLoaderFactory!

我做错了什么？

解决方法

您还需要将 BsModalService 添加到您的 providers 数组中。