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

Posted 2023-02-23

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

【英文标题】：Test error: Component is not part of any NgModule or the module has not been imported into your module

【发布时间】：2018-12-27 19:57:09

【问题描述】：

我有两个模块：

模块 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

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

【问题讨论】：

错误信息非常有用。在适当的模块声明数组中添加 HomeComponent。

是模块 A 你的app.module.ts

@DevEng 是的

@bodorgergely 我已经在 app.module.ts 中声明了 HomeComponent（我的描述中是模块 A）

也许我必须直接导入CustomInputComponent，而不是模块B？

【参考方案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();
));
...

【讨论】：

抱歉，我忘记将 CustomInputComponent 放在 BModule 的导出中。但即使我这样做了，我仍然有这个错误：“Component HomeComponent is not part of any NgModule”

所以如你所说，我尝试在PresentationComponent的测试文件中声明HomeComponent。在这种情况下，我有同样的错误，但对于应用程序模块中的另一个组件（我们称之为 CComponent）。

也许我应该在这个测试文件中导入 AppModule ？但这没有任何意义

你在 AppModule 中声明 HomeComponent 了吗？

当然可以，因为除了测试失败之外，一切正常（准确地说是我的主页）。很奇怪，可能是我的代码有问题（我的AppModule和BModule其实有30多个组件），但我还没有弄清楚真正的问题是什么。

【参考方案2】：

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