5

初心者として、私は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、正常に動作します。

ソリューションが投稿された後、次の行が繰り返されます。

ここに画像の説明を入力

4

1 に答える 1