Angular 2 在 Plunker 中看不到我在路由中的组件

Question

我确定它可能是我遗漏的非常简单的东西，但我似乎无法弄清楚它是什么。我有一个 plunker，显然看不到我定义的路线的 "HomeComponent"。据我所知，我遵循了一些我见过的例子，但显然我错过了一些东西而且我看不到什么。谁能看到这里的问题？

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 配置文件正在 ./src 文件夹中查找 app。

所以首先你需要将你的 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 {}

并且在应用程序模块中包含 HomeComponent 作为声明的一部分：

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

See it in plnkr here.

Angular 2 在 Plunker 中看不到我在路由中的组件

Angular 2 in Plunker can't see my component in route

angular

angular2-routing

plunker