각도 2 라우터 오류 : 'undefined'경로 구성이 잘못되었습니다

Question

각도 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));