Angular2 - 无法获取/

Question

I'm trying to add routes to my Angular2 application (I'm using Angular2 rc4). However I'm getting a problem loading in new page. In my app.comonent I can load all the routes fine with routerLink , but if I naviagte to the route via url it gives me Cannot GET / route. It also loads a home.component without errors as well. I tried adding HTTP_PROVIDERS, but no luck there. Any idea what is causing this issue ?

boot.ts

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

bootstrap(AppComponent, [
    provideRouter(APP_ROUTER_PROVIDERS),
    HTTP_PROVIDERS,
    APP_ROUTER_PROVIDERS
]).catch(err => console.error(err));

app.routes.ts

import {provideRouter, RouterConfig} from '@angular/router';
// Components 
import {HomeComponent} from './home/home.component';
import {StoreComponent} from './store/store.component';


export const routes: RouterConfig = [

    { path: '', component: HomeComponent },
    { path: 'store', component: StoreComponent },

];

export const APP_ROUTER_PROVIDERS = [
    provideRouter(routes)
];

home.component.ts

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

//const template = require('./home.component.html'); 
const template = 'src/app/home/home.component.html'; 

@Component({
  selector: 'my-home',
  templateUrl: template
})

export class HomeComponent {

}

store.component.ts

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

const template = 'src/app/store/store.component.html'; 
const styles = '/store.component.css'; 

// Mock Models 
interface Product {
    id: number;
    logo: string;
    name: string;
    price: number;
}; 
let Categories:string[] = ['Convertible','Sports Car','Truck','Suv'] ;
let Products:Product[] = [
    { id: 0, logo: '/images/Logo.png', name: "Food ", price: 1000 },
    { id: 1, logo: '/images/Logo.png', name: "Shelter", price:2000 },
    { id: 2, logo: '/images/Logo.png', name: "Health", price:3000 },
    { id: 3, logo: '/images/Logo.png', name: "Advocacy", price: 4000},
    { id: 4, logo: '/images/Logo.png', name: "Funding", price: 5000 },
];

@Component({
    selector: 'my-store',
    templateUrl : template
})

export class StoreComponent {
    categories:string[] = Categories ; 
    products:Product[] = Products ; 

}

Answer 1

Remove this line

APP_ROUTER_PROVIDERS

from bootstrap(...) . This is already provided by provideRouter(...)

I think pathMatch: 'full' is required for this route

    { path: '', component: HomeComponent, pathMatch: 'full' },

but it seems to also work without for others.