Plunker中的Angular 2无法在路线中看到我的组件

Question

我确信这可能是一件非常简单的事情，我很遗憾，但我似乎无法弄清楚它是什么。我有一个看起来无法看到我所定义的路线的“HomeComponent”的plunker。据我所知，我已经看过一些我见过的例子，但很明显我错过了一些东西而且看不清楚。谁能在这里看到这个问题？

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

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {RouterModule, Routes} from '@angular/router'
import {HomeComponent} from '../home/home'

@Component({
  selector: 'app-root',
  templateUrl: './src/app.html'
})
export class App {
  name:string;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
}

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

@NgModule({
  imports: [ BrowserModule, HomeComponent, RouterModule.forRoot(routes) ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Answer 1

我看到了问题。您的SystemJs配置文件正在app文件夹中查找./src。

首先，您需要将home组件放在src文件夹中：

src/home/home.html和src/home/home.ts

然后，要加载模板，SystemJs不是从组件本身而是从index.html查找相对url，因此您需要将home组件更改为：

import { Component } from '@angular/core';

@Component({
   templateUrl: 'src/home/home.html'
})

export class HomeComponent {}

在app模块中包含HomeComponent作为声明的一部分：

@NgModule({
  imports: [ BrowserModule, RouterModule.forRoot(routes) ],
  declarations: [ App, HomeComponent ],
  bootstrap: [ App ]
})
export class AppModule {}

See it in plnkr here。