测试错误：组件不是任何 NgModule 的一部分，或者该模块尚未导入到您的模块中

Question

我有两个模块：

• 模块 A
  • 组件主页
  • 组件展示
• 模块 B
  • 组件自定义输入

app.module.ts（模块 A）

@NgModule({
    declarations: [
        HomeComponent,
        PresentationComponent
    ],
    imports: [
        ModuleB
    ]
})
export class AppModule {
}

presentation.component.html

<custom-input><custom-input>

presentation.component.spec.ts

describe('PresentationComponent', () => {
    let component: PresentationComponent;
    let fixture: ComponentFixture<PresentationComponent>;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [PresentationComponent],
            imports: [ModuleB]
        })
        .compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(PresentationComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('should create', () => {
         expect(component).toBeTruthy();
    });
});

b.module.ts（模块 B）

@NgModule({
    declarations: [
        CustomInputComponent
    ],
    exports: [
        CustomInputComponent
    ]
})
export class ModubleB {
}

组件Presentation在其html中使用CustomInput标签，因此在模块B中，我导出CustomInputComponent然后将模块B导入模块A。

问题是，在Presentation Component的spec文件中，我还必须将Module B导入到Test Module中。但我有这个错误：

Component HomeComponent is not part of any NgModule or the module has not been imported into your module

我真的不明白为什么？有任何想法吗 ？谢谢！

Answer 1

您需要在您的BModule 中导出CustomInputComponent，以便您可以在其他模块及其组件中使用它，唉，在您的PresentationComponent 的模板中。在你的PresentationComponent的spec文件中你还需要导入BModule，因为你在组件中使用它，并且你需要单独测试组件，所以你必须提供你的组件需要的一切。

一个非常抽象的组件结构图：

AppModule

@NgModule({
  declarations: [AppComponent, HomeComponent, PresentationComponent],
  imports: [BrowserModule, BModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

应用组件

@Component({
  selector: 'app-root',
  template: `
    <app-home></app-home>
    <app-presentation></app-presentation>
  `,
  styles: [':host { display: block; border: 1px solid pink; color: pink; padding: 10px; }']
})
export class AppComponent { }

AppComponent 规范

...
beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [BModule],
    declarations: [AppComponent, HomeComponent, PresentationComponent]
  }).compileComponents();
}));
...

主页组件

@Component({
  selector: 'app-home',
  template: `<p>home works!</p>`,
  styles: [':host { display: block; border: 1px solid orange; color: orange; padding: 10px; }']
})
export class HomeComponent { }

HomeComponent 规范

...
beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [HomeComponent]
  }).compileComponents();
}));
...

PresentationComponent

@Component({
  selector: 'app-presentation',
  template: `
    <p>presentation works!</p>
    <app-custom-input></app-custom-input>
  `,
  styles: [':host { display: block; border: 1px solid blue; color: blue; padding: 10px; }']
})
export class PresentationComponent { }

PresentationComponent 规范

...
beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [BModule], // has to import the module because you use its exported component in the PresentationComponent
    declarations: [PresentationComponent]
  }).compileComponents();
}));
...

BModule

@NgModule({
  imports: [CommonModule],
  declarations: [CustomInputComponent],
  exports: [CustomInputComponent] // has to export the component to make it available to other modules
})
export class BModule { }

自定义输入组件

@Component({
  selector: 'app-custom-input',
  template: `<p>custom-input works!</p>`,
  styles: [':host { display: block; border: 1px solid green; color: green; padding: 10px; }']
})
export class CustomInputComponent { }

CustomInputComponent 规范

...
beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [CustomInputComponent]
  }).compileComponents();
}));
...

Answer 2

试试 NO_ERRORS_SCHEMA。这应该可以解决您的问题。