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

Question

I'm sure it's probably something ridiculously simple that I'm missing, but I can't seem to figure out what it is. I have a plunker that apparently can't see my "HomeComponent" for the route I have defined. As far as I can tell, I've followed some examples I've seen, but clearly I've missed something and I can't see what. Can anyone see the issue here?

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

I see the issues. Your SystemJs config file is looking for app in the ./src folder.

So first you need to place your home component inside the src folder:

src/home/home.html and src/home/home.ts

Then, to load the template, SystemJs is not looking for the relative url from the component itself but from the index.html, so you need to change your home component to:

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

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

export class HomeComponent {}

And in the app module include HomeComponent as part of the declarations:

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

See it in plnkr here.