I'm developing a github repository (with angular 7 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, 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...