角2のルーターのプロバイダーなし

Question

初心者では、角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!

ルータなしプロバイダ。

私は間違っていますか？私が行う場合

：

UPDATE app.component.tsで

template: ` 
    <h1>{{title}}</h1> 
    <contacts-list></contacts-list> 
    ` 

を、それが正常に動作します。

ソリューションが掲載された後、私は繰り返しの行を参照してください。あなたのモジュール定義と「輸入品」配列にRouterModuleをインポートする必要があり

Answer 1

を：

const ROUTES = [ 
    // HERE ROUTES DEFINITIONS 
] 

@NgModule({ 
    imports: [ 
     RouterModule.forChild(ROUTES) 
    ], 
    declarations: [], 
    providers: [] 
}) 
export default class YourModuleDefinition{ 

} 

だからあなたのコードは次のようになりますその：

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'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    ContactsListComponent, 
    ContactCardComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    RouterModule.forRoot([ 
     { 
      path:'', 
      redirectTo:'app', 
      pathMatch:'full', 
     }, 
     { 
      path:'app', 
      component:AppComponent 
     }, 
     { 
      path:'contact-list', 
      component:ContactsListComponent 
     }, 
     { 
      path:'contact-details/:id', 
      component:ContactCardComponent 
     } 
    ]); 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

forRoot sta提供されたコンフィギュレーションを持つRouterModuleのticクラスメソッドは、imports配列に追加され、モジュールのルーティングに関する懸案事項を提供します。ここ

詳細はこちらからも私のアプローチでhttps://angular.io/guide/ngmodule