Why is routing not working in Angular 2?

Question

Could you please tell me why routing is not working in Angular 2? I try to load a component when the path is blank.

Here is my code:

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

Check your console for for error, i think no base href tag is causing this error. caused by: No base href set in index.html. Please provide a value for the APP_BASE_HREF token or add a base element to the document.

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

In your app.module.ts there is no home compnent.

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

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

Answer 2

There are some issues with your code:

1. The base href needs to be set, as explained here. Typically, this would look like:
   <base href="/">
   To get your plunker to work, however, you would need something along the lines of:
   <script>document.write('<base href="' + document.location + '" />');</script>.

2. You need to move the declaration of your HomeComponent to before the point where you use it in the definition of your routes.

Updated plunker here.