1

I have two modules:

  • Module A
    • Component Home
    • Component Presentation
  • Module B
    • Component CustomInput

app.module.ts (Module 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 (Module B)

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

The component Presentation uses the CustomInput tag in its html, so in module B, I exported CustomInputComponent then import the module B into module A.

The problem is, in the spec file of Presentation Component, I also have to import Module B into the Test Module. But I have this error:

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

I really don't understand why ? Any ideas ? Thanks !

Improve this question
9
  • The error message is very informative. Add the HomeComponent in an appropriate module's declaration array. Commented Jul 19, 2018 at 15:47
  • is module A your app.module.ts Commented Jul 19, 2018 at 15:55
  • @DevEng yes it is Commented Jul 19, 2018 at 16:04
  • @bodorgergely I already declare the HomeComponent in the app.module.ts (Module A in my description) Commented Jul 19, 2018 at 16:05
  • Maybe I have to import directly the CustomInputComponent, but not the module B ? Commented Jul 19, 2018 at 16:08

2 Answers 2

Reset to default
2

You need to export the CustomInputComponent in your BModule so you can use it in other modules and in their components, alas in the template of your PresentationComponent. In the spec file of your PresentationComponent you also need to import the BModule, because you use it in the component, and you need to test the component in isolation, so you have to provide everything your component needs.

A very abstract picture of how the components are structured: app component structure

AppModule

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

AppComponent

@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 spec

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

HomeComponent

@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 spec

... 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 spec

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

CustomInputComponent

@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 spec

... beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [CustomInputComponent] }).compileComponents(); })); ...
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Sorry I forgot to put CustomInputComponent in BModule's exports. But even if I did that, I still have this error: "Component HomeComponent is not part of any NgModule"
So as you said, I tried to declare HomeComponent in the test file of PresentationComponent. In this case, I have the same error but for another component (let's call CComponent) in the app module.
Maybe I should import the AppModule in this test file ? but it doesn't make any sense
did you declare HomeComponent in AppModule?
yes of course, because except the tests failed, everything works (my home page to be exact). It is strange, maybe there is a problem in my code (my AppModule and BModule have more than 30 components in fact), but I haven't still find out what is the real problem.
0

Try NO_ERRORS_SCHEMA. That should solve your issue.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.