Angular実行テストエラー:'router-outlet'is not a known element

ネイティブ環境:

$ ng --version
Angular CLI: 7.1.1
Node: 10.11.0
OS: darwin x64
Angular: 7.1.1
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.10.6
@angular-devkit/build-angular     0.10.6
@angular-devkit/build-optimizer   0.10.6
@angular-devkit/build-webpack     0.10.6
@angular-devkit/core              7.0.6
@angular-devkit/schematics        7.1.1
@ngtools/webpack                  7.0.6
@schematics/angular               7.1.1
@schematics/update                0.11.1
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.19.1

誤報内容

ng serveを使用してアプリケーションを実行し、http://localhost:4200にアクセスすることで正常に動作し、エラーは報告されなかった.
しかし、ng testのテストを実行するとエラーが発生し、エラーの内容は以下の通りです.

Chrome 72.0.3622 (Mac OS X 10.13.6) AppComponent should create the app FAILED
	'router-outlet' is not a known element:
	1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
	2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
	
	[ERROR ->]
    ...

エラーメッセージは、テスト例を実行してAppComponentを作成できませんでした.テストコードにルーティングモジュールが導入されていないはずです.

解決策

githubユーザー@mokipediaからの解決策:

For everyone else having this issue: in app.component.spec.ts

import {RouterTestingModule} from '@angular/router/testing'

add imports to TestBed

beforeEach(() => { 
    TestBed.configureTestingModule({ 
        declarations: [ AppComponent ], 
        imports: [ RouterTestingModule ] 
    })
})

モジュールapp.component.spec.tsは、試験例ファイルbeforeEachのRouterTestingModule部分に導入される.

完全なコード

ファイルapp.component.spec.tsの完全なコードは次のとおりです.

// app.component.spec.ts
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { RouterTestingModule } from '@angular/router/testing'
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { MessagesComponent } from './pages/messages/messages.component';
import { HeroSearchComponent } from './pages/hero-search/hero-search.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent, MessagesComponent, HeroSearchComponent
      ],
      imports: [ 
        // fix errors:  'router-outlet' is not a known element
        RouterTestingModule,
        HttpClientTestingModule, 
      ] 
    }).compileComponents();
  }));

  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
});

詳細については、プロジェクトコードを参照してください.
https://github.com/cnwyt/angular-tour-of-heroes
[END]