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

Question

我正在尝试测试使用 ngx-bootstrap 的模态指令的 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>

这是我已经尝试过的：

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

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

将ModalDirective添加到declarations列表中：

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

我做错了什么？

Answer 1

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