角2のルートが動作しない

Question

私はCLIを使用して角度2のアプリケーションを作成しました。私はそれについて学んでいます。ルートをセットアップしようとしていますが、何らかの理由でリンクがクリックされたときに機能しません。

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 { ProductListComponent } from '../products/product-list.component'; 

@NgModule({ 
    imports: [ 
    BrowserModule, 
    FormsModule, 
     HttpModule, 
     RouterModule.forRoot([ 
      { path: 'products', component: ProductListComponent } 
     ]) 
    ], 
    declarations: [ 
     AppComponent, ProductListComponent 
    ], 
    //providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

そして、この：これはapp.module.tsコードです...

を正しく表示されているが、HTMLコンテンツが同じで、私が表示したい成分の含有量が表示されていません私のproduct-list.component.tsファイルのコードです：

import { Component, OnInit } from '@angular/core'; 
@Component({ 
    template: '<p>Component product list</p>' 
}) 

export class ProductListComponent { 
title: 'The Products from Component...'; 
} 

Developers Tools Consoleには間違っているとは確信していません。リンクをクリックするとhttpリクエストがありません。

リンク先

<h1> 
    {{title}} 
</h1> 
<p>This is a test</p> 
<a [routerLink] ="['/products']"> Values list</a> 

メインURLはこの1つである：について話してapp.component.htmlであるhttp://localhost:4200、およびリンクがクリックされたときにproduct-list.component.tsの内容が表示されていない、それはhttp://localhost:4200/productsに変わりはなく、単にURLがHTMLを変更しません.. 何か案が？私は何が起こっているのか調べる方法はありますか？

Answer 1

あなたの.htmlにrouter-outlet指示がない可能性があります。

<h1> 
    {{title}} 
</h1> 
<p>This is a test</p> 
<router-outlet></router-outlet> 
<a [routerLink] ="['/products']"> Values list</a>