Angular 2 rc3 routing issues

Question

I think I have followed directions to get routing in rc3 working. It works well in rc1. I create the app.routes, the app.providers, and it looks like this:

main.ts:

import {bootstrap}    from '@angular/platform-browser-dynamic';
import {APP_ROUTER_PROVIDER} from './app.routes';
import {HTTP_PROVIDERS} from '@angular/http';
import {AppComponent} from './app.component';

bootstrap(AppComponent, [APP_ROUTER_PROVIDER, HTTP_PROVIDERS]); 

app.component.ts:

import {Component, OnInit} from '@angular/core';
import {ROUTER_DIRECTIVES, Router} from '@angular/router';
import { APP_PROVIDERS } from './app.providers';


@Component({
    selector: 'my-app',
    template: '<router-outlet></router-outlet>',
     directives: [ROUTER_DIRECTIVES],
    providers: [APP_PROVIDERS]
})
export class AppComponent implements OnInit { 
    constructor(private router: Router) {


    }
    ngOnInit() {
        this.router.navigate(['home']);
    }
}

app.providers.ts

import { bind } from '@angular/core';
import { HTTP_PROVIDERS } from '@angular/http';
import { FORM_PROVIDERS, LocationStrategy, HashLocationStrategy } from '@angular/common';
   
export const APP_PROVIDERS = [
    
    FORM_PROVIDERS,
    HTTP_PROVIDERS 
];

home.routes.ts

import {RouterConfig} from '@angular/router';
import {HomeComponent} from './home.component';

export const HomeRoutes: RouterConfig = [
    { path: 'home', component: HomeComponent, terminal: true }
];

home.component.ts

import {Component} from '@angular/core';
import {ROUTER_DIRECTIVES, Router} from '@angular/router';

@Component({
    selector: 'kg-home',
    templateUrl: './home.component.html',
    directives: [ROUTER_DIRECTIVES]
})

export class HomeComponent {
    constructor(private router: Router) {
        console.log('in home component')
    }
}

but when I run it, I get:

Any help would be appreciated, I have been staring at this stuff now for 2 days.

Answer 1

You need a default route

export const HomeRoutes: RouterConfig = [
    { path: '', redirectTo: '/home', terminal: true},
    { path: 'home', component: HomeComponent }
];