爲什麼路由在Angular 2中不起作用？

Question

能否告訴我爲什麼路由在Angular 2中不起作用？我嘗試在路徑爲空時加載組件。

這裏是我的代碼：

http://plnkr.co/edit/Vgc2bB7Lc8h9XsuhIg6X?p=preview

import { NgModule,Component }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { RouterModule } from '@angular/router'; 


import { AppComponent } from './app.component'; 


const routes =[ 
    { 
    path :'' ,component:HomeComponent 
    } 
    ]; 


@Component({ 
    selector: 'home', 
    template: '<h1>home</h1>' 
}) 
export class HomeComponent { } 

@NgModule({ 
    imports:  [ BrowserModule,RouterModule.forRoot(routes)], 
    declarations: [ AppComponent,HomeComponent ], 
    bootstrap: [ AppComponent ] 
}) 

export class AppModule 
{ } 

Answer 1

有一些問題與您的代碼：

1. 的base href需要進行設置，如解釋here。通常情況下，這看起來像：
   <base href="/">
   爲了讓您的plunker工作，但是，你需要沿着線的東西：
   <script>document.write('<base href="' + document.location + '" />');</script>。

2. 您需要將HomeComponent的聲明移到您在路由定義中使用它的位置之前。

更新的重擊器here。

Answer 2

檢查您的控制檯是否有錯誤，我認爲沒有基礎href標記導致此錯誤。 引起：在index.html中沒有設置基礎href。請爲APP_BASE_HREF標記提供值或向文檔添加基本元素。

<script>document.write('<base href="' + document.location + '" />');</script> 

在你app.module.ts沒有回家構成元素。

import { AppComponent } from './app.component'; 
import { HomeComponent } from './app.home-component'; 

const routes =[ 
    { 
    path :'' ,component:HomeComponent 
    } 
    ];