Angular 2 TestModuleMetadata does not have an EntryComponents property

Question

I'm using Angular CLI 1.0.0-beta.32.2 and am writing a unit test for an Angular 2 service, which dynamically creates a Component and inserts it into another Component.

In my unit test I try to create a mock component to test my service, but the output of ng test throws an error, stating my mock Component is specified in the entryComponents property. When I try to add the Component into an entryComponents property of the TestModuleMetadata object, like this: TestBed.createTestingModule({...entryComponents: [ TestDialogComponent ]...}) I see the following error stating the entryComponents property does not exist.

Chrome 56.0.2924 (Windows 10 0.0.0) DialogService should create a child component when opening FAILED Error: No component factory found for TestDialogComponent. Did you add it to @NgModule.entryComponents?

Looking at the TestModuleMetadata definition shows that the entryComponents property does not exist. So how do I go about dynamically creating a Component in my unit tests in Angular 2 and Jasmine?

Answer 1

As far as i know it has not supported yet. As workaround you can create fake module with entryComponent and import it to your testing module

@NgModule({
  imports: [CommonModule],
  declarations: [TestDialogComponent],
  entryComponents: [TestDialogComponent]
})
export class FakeTestDialogModule {}

and then

TestBed.configureTestingModule({
    imports: [FakeTestDialogModule]

Answer 2

Check TestBed.overrideModule. Please refer to this discussion https://github.com/angular/angular/issues/12079

I got the error for my DialogBoxComponent. I resolved it as follows

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ NewPracticeQuestionComponent,
      DialogBoxComponent,
        ShowErrorsComponent],
      imports:[ReactiveFormsModule,HttpClientTestingModule],
      providers:[WebToBackendInterfaceService,HelperService,AuthService]
    })

    TestBed.overrideModule(BrowserDynamicTestingModule, {
      set: {
        entryComponents: [DialogBoxComponent]
      }
    })
    .compileComponents();
  }));