我正在使用 Angular 2 路由器 3.0.0-beta.2。
我似乎无法找到一条工作路线,我遇到了这个错误:
“错误:路由‘undefined’的无效配置:必须提供组件、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>
最佳答案
您需要为 HomeComponent 导入提供正确的相对路径:
而不是这个:
从 './' 导入 {HomeComponent};
这样做:
从 './home.component' 导入 {HomeComponent};
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));
关于Angular 2 路由器错误 : Invalid configuration of route 'undefined' ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38596016/