質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.36%
Karma

Karma(元Testacular)は、node.jsベースのJavaScriptテストランナー。AngularJSのテストフレームワークとして開発されたもので、クライアントサイドのJavaScriptコードのテストを容易に実行できます。

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

解決済

1回答

4562閲覧

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

akarin

総合スコア22

Karma

Karma(元Testacular)は、node.jsベースのJavaScriptテストランナー。AngularJSのテストフレームワークとして開発されたもので、クライアントサイドのJavaScriptコードのテストを容易に実行できます。

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2019/01/30 03:08

編集2019/01/30 04:14

やりたいこと

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

html

1<h1>{{ title }}</h1> 2<nav> 3 <a routerLink="/dashboard">Dashboard</a> 4 <a routerLink="/heroes">Heroes</a> 5</nav> 6<router-outlet></router-outlet> 7<app-messages></app-messages>

app.component.ts

TypeScript

1import { Component } from '@angular/core'; 2 3@Component({ 4 selector: 'app-root', 5 templateUrl: './app.component.html', 6 styleUrls: ['./app.component.scss'], 7}) 8export class AppComponent { 9 title = 'Tour of Heroes'; 10}

app.module.ts

TypeScript

1import { NgModule } from '@angular/core'; 2import { BrowserModule } from '@angular/platform-browser'; 3import { FormsModule } from '@angular/forms'; // <-- NgModel lives here 4import { HttpClientModule } from '@angular/common/http'; 5 6import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api'; 7import { InMemoryDataService } from './in-memory-data.service'; 8 9import { AppRoutingModule } from './app-routing.module'; 10 11import { AppComponent } from './app.component'; 12import { DashboardComponent } from './dashboard/dashboard.component'; 13import { HeroDetailComponent } from './hero-detail/hero-detail.component'; 14import { HeroesComponent } from './heroes/heroes.component'; 15import { HeroSearchComponent } from './hero-search/hero-search.component'; 16import { MessagesComponent } from './messages/messages.component'; 17 18@NgModule({ 19 imports: [ 20 BrowserModule, 21 FormsModule, 22 AppRoutingModule, 23 HttpClientModule, 24 // The HttpClientInMemoryWebApiModule module intercepts HTTP requests 25 // and returns simulated server responses. 26 // Remove it when a real server is ready to receive requests. 27 HttpClientInMemoryWebApiModule.forRoot( 28 InMemoryDataService, { dataEncapsulation: false }, 29 ), 30 ], 31 declarations: [ 32 AppComponent, 33 DashboardComponent, 34 HeroesComponent, 35 HeroDetailComponent, 36 MessagesComponent, 37 HeroSearchComponent, 38 ], 39 bootstrap: [AppComponent], 40}) 41export class AppModule {}

app-routing.module.ts

TypeScript

1import { NgModule } from '@angular/core'; 2import { RouterModule, Routes } from '@angular/router'; 3 4import { DashboardComponent } from './dashboard/dashboard.component'; 5import { HeroesComponent } from './heroes/heroes.component'; 6import { HeroDetailComponent } from './hero-detail/hero-detail.component'; 7 8const routes: Routes = [ 9 { path: '', redirectTo: '/dashboard', pathMatch: 'full' }, 10 { path: 'dashboard', component: DashboardComponent }, 11 { path: 'detail/:id', component: HeroDetailComponent }, 12 { path: 'heroes', component: HeroesComponent }, 13]; 14 15@NgModule({ 16 imports: [RouterModule.forRoot(routes)], 17 exports: [RouterModule], 18}) 19export class AppRoutingModule {} 20

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

wwbQzhMkhhgEmhU

2019/01/31 18:32

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

2019/02/01 07:08

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

2019/02/01 07:58

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

2019/02/01 08:12

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

回答1

0

自己解決

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

typescript

1import { TestBed, async } from '@angular/core/testing'; 2import { RouterTestingModule } from '@angular/router/testing'; 3 4import { AppComponent } from './app.component'; 5import { MessagesComponent } from './messages/messages.component'; 6 7describe('AppComponent', () => { 8 beforeEach(async(() => { 9 TestBed.configureTestingModule({ 10 imports: [RouterTestingModule], 11 declarations: [AppComponent, MessagesComponent], 12 }).compileComponents(); 13 })); 14 15 it('should create the app', () => { 16 const fixture = TestBed.createComponent(AppComponent); 17 const app = fixture.debugElement.componentInstance; 18 expect(app).toBeTruthy(); 19 }); 20 21 it(`should have as title 'Tour of Heroes'`, () => { 22 const fixture = TestBed.createComponent(AppComponent); 23 const app = fixture.debugElement.componentInstance; 24 expect(app.title).toEqual('Tour of Heroes'); 25 }); 26 27 it('should render title in a h1 tag', () => { 28 const fixture = TestBed.createComponent(AppComponent); 29 fixture.detectChanges(); 30 const compiled = fixture.debugElement.nativeElement; 31 expect(compiled.querySelector('h1').textContent).toContain( 32 'Welcome to angular-tour-of-heroes!', 33 ); 34 }); 35});

投稿2019/02/01 08:15

akarin

総合スコア22

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問