Angular Karma Jasmine Error: Illegal state: Could not load the summary for directive

问题:

I'm developing a github repository (with angular 4 and angular-cli), and I have some tests with Karma and Jasmine working in the master branch.

Now I'm trying to add lazy loading feature, and I've created a new branch that you can see here.

The thing is, that the tests that before passed, now they do not. It's funny because only the tests from the lazy loading module are failing...

Here is the code and the error:

import {async, TestBed} from '@angular/core/testing'; import {APP_BASE_HREF} from '@angular/common'; import {AppModule} from '../../app.module'; import {HeroDetailComponent} from './hero-detail.component';  describe('HeroDetailComponent', () => {   beforeEach(async(() => {     TestBed.configureTestingModule({       imports: [AppModule       ],       providers: [         {provide: APP_BASE_HREF, useValue: '/'}       ],     }).compileComponents();   }));    it('should create hero detail component', (() => {     const fixture = TestBed.createComponent(HeroDetailComponent);     const component = fixture.debugElement.componentInstance;     expect(component).toBeTruthy();   })); }); 

The error is this:

Chrome 58.0.3029 (Mac OS X 10.12.6) HeroDetailComponent should create hero detail component FAILED     Error: Illegal state: Could not load the summary for directive HeroDetailComponent.         at syntaxError Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/compiler/@angular/compiler.es5.js:1690:22)         at CompileMetadataResolver.getDirectiveSummary Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/compiler/@angular/compiler.es5.js:15272:1)         at JitCompiler.getComponentFactory Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/compiler/@angular/compiler.es5.js:26733:26)         at TestingCompilerImpl.getComponentFactory Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/compiler/@angular/compiler/testing.es5.js:484:1)         at TestBed.createComponent Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/core/@angular/core/testing.es5.js:874:1)         at Function.TestBed.createComponent Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/core/@angular/core/testing.es5.js:652:1)         at UserContext.it Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/src/app/heroes/hero-detail/hero-detail.component.spec.ts:18:29)         at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/zone.js/dist/zone.js:391:1)         at ProxyZoneSpec.onInvoke Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/zone.js/dist/proxy.js:79:1)         at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/zone.js/dist/zone.js:390:1) 

You can see the entire project, for more details if you need it.

UPDATE: added declaration like this:

beforeEach(async(() => {     TestBed.configureTestingModule({       imports: [         AppModule       ],       declarations: [HeroDetailComponent],       providers: [         {provide: APP_BASE_HREF, useValue: '/'}       ],     }).compileComponents();   })); 

Now, new errors appears:

The pipe 'translate' could not be found ("<h1 class="section-title">{{[ERROR ->]'heroDetail' | translate}}</h1>     <md-progress-spinner *ngIf="!hero"                          class="progre"): ng:///DynamicTestModule/HeroDetailComponent.html@0:28     Can't bind to 'color' since it isn't a known property of 'md-progress-spinner'. 

And more... it's like all directives and components from angular material, and the pipe translate from ngx-translate/core do not appear to be included...

UPDATED: FINAL SOLUTION

The problem was that HeroesModule was not been imported anywhere. This works, because HeroesModule declares HeroDetailComponent, which was the initial problem:

import {async, TestBed} from '@angular/core/testing'; import {APP_BASE_HREF} from '@angular/common'; import {AppModule} from '../../app.module'; import {HeroDetailComponent} from './hero-detail.component'; import {HeroesModule} from '../heroes.module';  describe('HeroDetailComponent', () => {   beforeEach(async(() => {     TestBed.configureTestingModule({       imports: [         AppModule,         HeroesModule       ],       providers: [         {provide: APP_BASE_HREF, useValue: '/'}       ],     }).compileComponents();   }));    it('should create hero detail component', (() => {     const fixture = TestBed.createComponent(HeroDetailComponent);     const component = fixture.debugElement.componentInstance;     expect(component).toBeTruthy();   })); }); 

回答1:

You passed HeroDetailComponent to TestBed.createComponent() without declaring the component first:

TestBed.configureTestingModule({   imports: [AppModule,      CommonModule,      FormsModule,      SharedModule,      HeroRoutingModule,      ReactiveFormsModule   ],   providers: [     {provide: APP_BASE_HREF, useValue: '/'}   ],   declarations: [HeroDetailComponent] }).compileComponents(); 

Hope it helps.

---

Update for following errors in your test: Added some more imports (just take your HeroModule as a blueprint because that's basically what you want to import and provide).

回答2:

You're missing the declarations, you need to add the class being tested into the declarations.

declarations: [component] 

回答3:

you must import the component HeroDetailComponent in the right way. Notice that even case of letters is matter in paths. i.e ('@angular/forms' is correct, BUT'@angular/Forms' is not.

文章来源: Angular Karma Jasmine Error: Illegal state: Could not load the summary for directive