Angular チュートリアルに沿って作成したアプリで、テストを実行するとエラーが出る

Question

やりたいこと

Angularの公式ドキュメントに沿って、アプリを作成しました。
https://angular.jp/tutorial

作成したアプリに対してテストを実施したところ、エラーを吐くのでエラーを解決したいです。
どのようにしたら解決できるでしょうか。

エラー

ng testを実施すると以下のエラーが出ます。テストプログラムは変えていません。

AppComponent should create the app
Failed: Template parse errors:
'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. ("
  <a routerLink="/heroes">Heroes</a>
</nav>
[ERROR ->]<router-outlet></router-outlet>
<app-messages></app-messages>
"): ng:///DynamicTestModule/AppComponent.html@5:0

ソース

おそらくapp.module.tsの@NgModuleが何か悪いのだと思っていますが、当てがつきません。

app.component.html

<h1>{{ title }}</h1>
<nav>
  <a routerLink="/dashboard">Dashboard</a>
  <a routerLink="/heroes">Heroes</a>
</nav>
<router-outlet></router-outlet>
<app-messages></app-messages>

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  title = 'Tour of Heroes';
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
import { HttpClientModule } from '@angular/common/http';

import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService } from './in-memory-data.service';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
import { HeroesComponent } from './heroes/heroes.component';
import { HeroSearchComponent } from './hero-search/hero-search.component';
import { MessagesComponent } from './messages/messages.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    HttpClientModule,
    // The HttpClientInMemoryWebApiModule module intercepts HTTP requests
    // and returns simulated server responses.
    // Remove it when a real server is ready to receive requests.
    HttpClientInMemoryWebApiModule.forRoot(
      InMemoryDataService, { dataEncapsulation: false },
    ),
  ],
  declarations: [
    AppComponent,
    DashboardComponent,
    HeroesComponent,
    HeroDetailComponent,
    MessagesComponent,
    HeroSearchComponent,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { DashboardComponent } from './dashboard/dashboard.component';
import { HeroesComponent } from './heroes/heroes.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent },
  { path: 'detail/:id', component: HeroDetailComponent },
  { path: 'heroes', component: HeroesComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Comments

[wwbQzhMkhhgEmhU]

angularよく分かってませんが、まずテストコードは*.spec.tsになります。
エラーはrouter-outletがよく分からないために起きています。
そしてこのエラーはテストコード(app.component.spec.ts)でRouterTestingModuleを使うことにより回避できます。
(★の部分が変更する行です)
...
import {RouterTestingModule} from '@angular/router/testing'; ★
...
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ AppComponent ],
imports: [ RouterTestingModule ] ★
})
.compileComponents();
}));
※よく知らないので間違ってたらごめんなさい。

[akarin]

ご回答ありがとうございます。
おっしゃる通り、テストコードでモジュールをインポートしていませんでした。
上記で解決できました。ベストアンサーを差し上げたいのですが、
改めてご回答いただけないでしょうか？

[wwbQzhMkhhgEmhU]

すみませんが、お気持ちだけで。よく分かってないので回答は控えておきます。

[akarin]

分かりました。
助かりました。ありがとうございますm(__)m

Answer 1

テストコードにも使用するモジュール、コンポーネントをインポートする。
app.component.spec.tsを以下のように変更。
※app-messagesのエラーも解消される

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

import { AppComponent } from './app.component';
import { MessagesComponent } from './messages/messages.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule],
      declarations: [AppComponent, MessagesComponent],
    }).compileComponents();
  }));

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

  it(`should have as title 'Tour of Heroes'`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('Tour of Heroes');
  });

  it('should render title in a h1 tag', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain(
      'Welcome to angular-tour-of-heroes!',
    );
  });
});