Angular 2 路由器错误：路由“未定义”的配置无效答案

【问题标题】：Angular 2 router Error: Invalid configuration of route 'undefined'Angular 2 路由器错误：路由“未定义”的配置无效
【发布时间】：2016-11-30 11:08:09
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： angular undefined angular2-routing

【解决方案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));

【讨论】：

天哪.. 复制粘贴错误！谢谢！

【解决方案2】：

对于未来的读者：

如果相关组件未在模块上注册，也会显示此错误，并且可能会非常混乱。

【讨论】：

【解决方案3】：

就我而言，我忘记从默认路由中删除组件

{ path: '', redirectTo: '/home', component: MovieComponent, pathMatch: 'full' },
{ path: 'home', component: MovieComponent }

只需从第一行删除 component: MovieComponent

【讨论】：