Angular 5&6 testing error: Could not load the summary for directive AppComponent

Question

Upon running ng test, I get an error stating:

Error: Illegal state: Could not load the summary for directive AppComponent.

I'm not sure why I'm getting this error, as I'm referencing and declaring AppComponent.

This is my app.component.spec.ts

import { ComponentFixture, TestBed } from "@angular/core/testing";
import { NO_ERRORS_SCHEMA } from "@angular/core";
import { Router } from "@angular/router";
import { ProjectService } from "../../shared/service/project/project.service";
import { AppComponent } from "./app.component";

describe("AppComponent", () => {
    let comp: AppComponent;
    let fixture: ComponentFixture<AppComponent>;

    beforeEach(() => {
        const routerStub = {
            navigate: () => ({})
        };
        const projectServiceStub = {
            GetActiveProject: () => ({
                name: {}
            })
        };
        TestBed.configureTestingModule({
            declarations: [ AppComponent ],
            schemas: [ NO_ERRORS_SCHEMA ],
            providers: [
                { provide: Router, useValue: routerStub },
                { provide: ProjectService, useValue: projectServiceStub }
            ]
        });
        fixture = TestBed.createComponent(AppComponent);
        comp = fixture.componentInstance;
    });

    it("can load instance", () => {
        expect(comp).toBeTruthy();
    });

    describe("ngOnInit", () => {
        it("makes expected calls", () => {
            const routerStub: Router = fixture.debugElement.injector.get(Router);
            const projectServiceStub: ProjectService = fixture.debugElement.injector.get(ProjectService);
            spyOn(routerStub, "navigate");
            spyOn(projectServiceStub, "GetActiveProject");
            comp.ngOnInit();
            expect(routerStub.navigate).toHaveBeenCalled();
            expect(projectServiceStub.GetActiveProject).toHaveBeenCalled();
        });
    });

});

Why is it throwing this error and how can I fix this error?

EDIT: I'm using the Angular CLI's default tsconfig and tsconfig.spec files. I've upgraded to Angular 6 in the meantime, I get the sam error. Even creating a new project with clean config files and replacing the src folder did not resolve the error.

Do you have a specific reason why you're using a 2 year old release candidate? — Jens Habegger, May 29 '18 at 09:41
@JensHabegger My bad, its not actually rc5, its 5.2.10. I'll update the tag. — Kars Barendrecht, May 29 '18 at 09:43
Do you set a custom value for "skipTemplateCodeGen" in your tsconfig? — Jens Habegger, May 29 '18 at 09:49

score 1 · Accepted Answer · answered May 31 '18 at 08:14

The combination of these settings conflict:

    declarations: [ AppComponent ],
    schemas: [ NO_ERRORS_SCHEMA ],

The AppComponent referenced another component, which the testbed module wasn't able to find. The no error schema hid the actual error, which was in AppComponent, but showed the error that the AppComponent itself since it couldn't be correctly loaded.

To solve this you can either make sure every child-componennt is referenced, or import the entire module as such:

    import: [ AppModule ],

Angular 5&6 testing error: Could not load the summary for directive AppComponent

1 Answers1