Угловой 2 маршрутизатор Ошибка: неверная конфигурация маршрута 'undefined'

Question

Я использую Angular 2 router 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));