Angular 2路由器錯誤：路由'undefined'的配置無效

Question

我正在使用Angular 2路由器3.0.0-beta.2。

似乎無法獲得一條工作路線。

「錯誤：路由的無效配置 '未定義'：成分redirectTo，兒童必須提供」

main.ts

import { bootstrap } from '@angular/platform-browser-dynamic'; 
import { enableProdMode } from '@angular/core'; 
import { AppComponent, environment, appRouterProviders } from './app'; 

bootstrap(AppComponent, [appRouterProviders]) 
    .catch(err => console.error(err)); 

app.routes.ts

import {provideRouter, RouterConfig} from '@angular/router'; 
import {HomeComponent} from './'; 

export const appRoutes:RouterConfig = [ 
    [{ 
    path: '', 
    redirectTo: '/home', 
    pathMatch: 'full' 
    },{ 
    path: 'home', 
    component: HomeComponent 
    }] 
]; 

export const routes: RouterConfig = [ 
    ...appRoutes 
]; 

export const appRouterProviders = [ 
    provideRouter(routes) 
]; 

app.component.ts

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

@Component({ 
    moduleId: module.id, 
    selector: 'app-root', 
    templateUrl: 'app.component.html', 
    directives: [ROUTER_DIRECTIVES] 
}) 
export class AppComponent { 
    title = 'app works!'; 
} 

個

home.component.ts

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

@Component({ 
    moduleId: module.id, 
    selector: 'app-home', 
    templateUrl: 'home.component.html', 
    directives: [ROUTER_DIRECTIVES] 
}) 
export class HomeComponent implements OnInit { 

    constructor() { } 

    ngOnInit() { 
    } 

} 

app.component.html

<h1> 
    App Shell 
</h1> 
<router-outlet></router-outlet> 

Answer 1

您需要提供的HomeComponent導入正確的相對路徑：

的這個：

import {HomeComponent} from './';

做到這一點：

import {HomeComponent} from './home.component';

app.routes.ts

import {provideRouter, RouterConfig} from '@angular/router'; 
import {HomeComponent} from './home.component'; // you need to provide correct relative path 

const appRoutes:RouterConfig = [     //removed export 
     {           // removed square bracket 
     path: '', 
     redirectTo: '/home', 
     pathMatch: 'full' 
     },{ 
     path: 'home', 
     component: HomeComponent 
     } 
    ]; 


    export const appRouterProviders = [ 
     provideRouter(routes) 
    ]; 

main.ts

import { bootstrap } from '@angular/platform-browser-dynamic'; 
import { enableProdMode } from '@angular/core'; 
import { AppComponent} from './app.component';  //please provide right path 
import {appRouterProviders } from './app.routes'; // added 

bootstrap(AppComponent, [appRouterProviders]) 
    .catch(err => console.error(err));