我使用的是Angular 2路由器3.0.0-beta.2 .
似乎无法通过单一途径工作 .
"Error: Invalid configuration of route 'undefined': component, redirectTo, children must be provided"
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>
3 回答
您需要为HomeComponent导入提供正确的相对路径:
而不是这个:
import {HomeComponent} from './';
做这个:
import {HomeComponent} from './home.component';
app.routes.ts
main.ts
对于未来的读者:
如果有问题的组件未在模块上注册,则此错误也会显示,并且可能非常混乱 .
就我而言,我忘了从默认路线中删除组件
只需从第一行删除 component: MovieComponent 即可