Angular Karma Jasmineエラー：不正な状態：ディレクティブの要約を読み込めませんでした

私はgithubリポジトリ（angular 7とangular-cli）を開発しており、masterブランチでKarmaとJasmineを使用していくつかのテストを行っています。

今、私は遅延読み込み機能を追加しようとしています、それは、以前は合格したテストが、今はそうではないということです。レイジーローディングモジュールからのテストだけが失敗しているので面白いです...

ここにコードとエラーがあります：

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();
  }));
});

エラーはこれです：

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)

詳細が必要な場合は、プロジェクト全体を表示できます。

更新：次のような宣言を追加しました：

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

今、新しいエラーが表示されます：

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'.

そしてもっと...それは角張った素材のすべてのディレクティブとコンポーネントのようなもので、ngx-translate / coreからのパイプ変換は含まれていないようです...

更新：最終的な解決策

問題は、HeroesModuleがどこにもインポートされなかったことです。これが機能するのは、HeroesModuleが最初の問題であるHeroDetailComponentを宣言しているためです。

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();
  }));
});

あなたは合格HeroDetailComponentへのTestBed.createComponent()最初のコンポーネントを宣言せずに：

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

それが役に立てば幸い。

テストでの次のエラーの更新：インポートをいくつか追加しました（HeroModuleを青写真にしてください。これは基本的にインポートして提供したいものだからです）。

宣言がないので、テストするクラスを宣言に追加する必要があります。

declarations: [component]

このタイプのエラーは、TestBed構成のプロバイダーの宣言とサービスに追加コンポーネントがないために発生します。

beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule.withRoutes([
        { path: 'home', component: DummyComponent },
        { path: 'patients/find', component: DummyComponent }
      ])],
      declarations: [RoutingComponent, DummyComponent,BreadcrumbComponent],
      providers : [BreadCrumbService]
    });

私の同僚と私はこの問題を抱えていましたが、修正はインターネット上の他のものとはかなり異なっていました。

Visual Studio Codeを使用しており、フォルダー名では大文字と小文字が区別されません。そのため、すべてのユーザーに小文字の命名規則を使用するように依頼しましたが、最終的に大文字の名前がソース管理に使用されるようになりました。私たちはそれを回り道に改名しましたが、すべて問題ありませんでした。

1か月後、同僚はこのエラーメッセージを表示して特定の単体テストを中断するようになりました。そのテストで彼のコンピュータだけが壊れていた。テストに影響を与える可能性のあるすべてのコードを文字どおりコメントアウトしましたが、それでもエラーが発生しました。最後に、クラスをグローバルに検索したところ、フォルダー名が大文字の名前に戻っていることがわかりました。追加した保留中の変更が認識されないように、名前を小文字に戻しましたが、テストは成功しました。

それをスタイルガイドに従うための教訓にしましょう。:)

明確にするために、修正はフォルダ名FOOをに変更するのと同様でしたfoo。

コンポーネントHeroDetailComponentを正しい方法でインポートする必要があります。パスでは文字の場合でも問題になることに注意してください。すなわち（「@角度/フォームは、」正しいこと、しかし「角度/フォーム@」ではありません。

これでまだ問題が発生している人のために、AngularチームがbeforeEachコールバック関数に加えた変更について説明した別のgithubの問題を読みました。

これが私がしたことです：

beforeAll(async(() => {
    TestBed.configureTestingModule({
        declarations: [BannerNotificationComponent]
    }).compileComponents()

    fixture = TestBed.createComponent(BannerNotificationComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
}));

beforeAllを使用すると、問題が修正されます。これがこのあいまいなバグを解決するのに1日ほどかかったので、これが他の人に役立つことを願っています。

コンポーネントをコンパイルせずにテストしたい場合は、それをプロバイダーとして宣言することでできます：

beforeEach(() => {
  TestBed.configureTestingModule({
    // provide the component-under-test and dependent service
    providers: [
      WelcomeComponent,
      { provide: UserService, useClass: MockUserService }
    ]
  });
  // inject both the component and the dependent service.
  comp = TestBed.get(WelcomeComponent);
  userService = TestBed.get(UserService);
});

参照：https : //angular.io/guide/testing#component-test-basics