Angular2 + Karma test: “Illegal state: Could not load the summary for directive Foo.”

Question

I have a component that looks like this:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-youtube',
  templateUrl: './youtube.component.html',
  styleUrls: ['./youtube.component.css']
})
export class YoutubeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  } 

}

In my karma, spec, I have the following:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { YoutubeComponent } from './youtube.component';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      // providers: [YoutubeComponent],tried this, and it makes no difference
      declarations: [ YoutubeComponent ]
    })
    .compileComponents();
  }));

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

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

The error in the Karma browser that I'm getting looks like:

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

It seems that previous, related questions were solved by adding the line declarations: [ YoutubeComponent ], which I already have. Any other advice?

A reproducible example is available on github:

git clone https://github.com/Atticus29/dataJitsu.git
cd dataJitsu
git checkout modalSO
rm package-lock.json
npm install
npm test

@Alex Szabó, I'm afraid I don't know exactly what you mean. — Atticus29
I managed to sort mine. I had a pipe with a dodgy generated spec file, and removing that did the trick. The pipe wasn't referenced at all, the test was even marked with "xit" so it wouldn't run but it still caused the error. See stackoverflow.com/questions/49114780/… @Atticus29 — lewtur

Prashanth S Prashanth S · Accepted Answer · 2018-03-23T06:43:13

@Atticus29 usually this error comes up when you have missed to:

declare some related component
add some referenced module in imports

try and check for any referenced components or modules.

Angular2 + Karma test: “Illegal state: Could not load the summary for directive Foo.”

1 Answers