初心者として、私はAngular 2でルートを設定する際に問題があります.私はかなり確信していますが、それは私が見逃している非常に基本的なものです.
私が望むのは、App Component
ロードしてタイトルを表示することだけです。そしてそのすぐ下にcontact-list component
、ルーターアウトレットセクションにロードするリンクがあります。
import { Component,OnInit } from '@angular/core';
import { Contact } from './contact';
@Component({
selector: 'app-root',
template: `
<h1>{{title}}</h1>
<a routerLink="/contact-list">Contact List</a>
<router-outlet></router-outlet>
`
})
export class AppComponent{
title = 'Welcome to my Dream App!';
}
こちらがapp.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { ContactCardComponent } from './contact-card.component';
import { ContactsListComponent } from './contacts-list.component';
RouterModule.forRoot([
{
path:'',
redirectTo:'app',
pathMatch:'full',
},
{
path:'app',
component:AppComponent
},
{
path:'contact-list',
component:ContactsListComponent
},
{
path:'contact-details/:id',
component:ContactCardComponent
}
]);
@NgModule({
declarations: [
AppComponent,
ContactsListComponent,
ContactCardComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
しかし、次のように述べています。
error_handler.js:54 EXCEPTION: Error in ./AppComponent class AppComponent - inline template:2:4 caused by: No provider for Router!
ルーターのプロバイダーがありません。
私は何を間違っていますか?
アップデート:
私が行った場合 :
template: `
<h1>{{title}}</h1>
<contacts-list></contacts-list>
`
でapp.component.ts
、正常に動作します。
ソリューションが投稿された後、次の行が繰り返されます。