Angular 2 Router错误，Route配置应该只包含一个“component”，“loader”或“redirectTo”属性

Question

这是我的设置：

import {bootstrap} from 'angular2/platform/browser';
import {Component} from 'angular2/core';
import {LocationStrategy, APP_BASE_HREF, HashLocationStrategy, ROUTER_DIRECTIVES, Router, RouteConfig, ROUTER_PROVIDERS} from 'angular2/router';
import {HomeComponent} from "../components/HomeComponent";
import {provide} from "angular2/core";

@Component({
    selector: 'app',
    template: `<a [routerLink]="['/Home']">Home</a>
              <router-outlet></router-outlet>`,
    directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
    { path: '/', component: HomeComponent, name: 'HomeComponent' }
])
class RootComponent {
    constructor(router:Router) {

    }
}

bootstrap(RootComponent, [ROUTER_PROVIDERS, provide(LocationStrategy, {useClass: HashLocationStrategy})
    , provide(APP_BASE_HREF, {useValue: '/'})]);

我一直得到这个错误，任何帮助表示赞赏

我正在使用最新的Beta.0

问候

肖恩

Answer 1

我遇到了同样的问题，但我通过使用组件定义中使用的相同组件名称以及导入组件时解决了问题，例如：

定义

import {Component} from 'angular2/core';

@Component({
    selector: 'register-page',
    template: `
        <h4>Register</h4>

    `
})
export class RegisterPageComponent {
   //public hero: Hero;
}

进口

import {RegisterPageComponent} from './register.component';

@RouteConfig([
   {path: '/register',   name: 'Register',component: RegisterPageComponent}
])

当我尝试在导入时更改组件名称时遇到了同样的问题，例如：issue

import {RegisterComponent} from './register.component'; 

/*remove`Page` from the name ,it should be RegisterPageComponent*/

路线

@RouteConfig([
    {path: '/register',name:'Register',component:RegisterComponent}
])

Answer 2

我遇到过同样的问题。 我的导入没有被花括号括起来，所以它是未定义的。 问题是隐秘的错误消息，它应该声明您提供的组件undefined为@RouteConfig 。

Answer 3

我有同样的错误，但出于其他原因。 确实，ng2中的错误报告仍然很差。 错误：Route config应该只包含一个“component”，“loader”或“redirectTo”属性，实际上只是意味着你在routeConfig中放置的内容不正确。 就我而言，我的组件未定义。 这是由于一个愚蠢的订单错误。

我有这个（component.ts）

export * from './trackerpanel.component';
export * from './login.component';
export * from './oauthcallback.component';
export * from './tracker.component';
export * from './settings.component';

像这样的导入（trackerpanel.component）

import {TrackerComponent, SettingsComponent} from './component';

我试图在trackerpanel中定义的路径中使用组件跟踪器和设置。 这给了我未定义的组件，以及上述错误。

@RouteConfig([
  {path: '/', name: 'Tracker', component: TrackerComponent, useAsDefault: true },
  {path: '/settings', name: 'Settings', component: SettingsComponent }
])

我改成了

export * from './tracker.component';
export * from './settings.component';
export * from './trackerpanel.component';
export * from './login.component';
export * from './oauthcallback.component';

这解决了我的路由问题。

Answer 4

我面临同样的错误，但我已经解决了以下问题：

当我写这样的代码

{ path: '/formDemo', Component: FormDemo, name: "FormDemo"},

它显示抛出你遇到的相同错误但是在搜索之后我发现错误是在我的RouteConfig的Component属性中，即angular2认为我们在routeConfig中编写了一个Component注释，但它只接受一个loader，component，redirectto（URL）属性。 但我们已经写了别的东西，所以当我用component代码更改Component时工作正常。

{ path: '/formDemo', component: FormDemo, name: "FormDemo"},

上面的行使我的代码工作。 它可能没有帮助解决您的问题，因为您已经编写组件的组件，但我已经发布了其他人可能会有助于其他人谢谢

Answer 5

在我的情况下，问题是错误导入的子组件。 组件导出是默认的：

export default class HomeComponent {}

所以我替换了它的导入

import { HomeComponent } from './homeComponent';

至

import HomeComponent from './homeComponent';

它的工作原理！

有趣的是，我用来捆绑应用程序的webpack不提供任何错误/警告。

Answer 6

在我的例子中，导入{TestComponent}和“export class TestingComponent”中的组件名称不匹配

TestingComponent应该是TestComponent。

Answer 7

我刚才有同样的问题。 这与我创建一个组件有关，而Webpack没有认出它。

重新启动Webpack后错误消失了..

Answer 8

你的NgModule应该改变

provide(LocationStrategy, {useClass: HashLocationStrategy})
    , provide(APP_BASE_HREF, {useValue: '/'})]);

至

providers: [LocationStrategy, {useClass: HashLocationStrategy}), {provide: APP_BASE_HREF, useValue: '/'}]

https://github.com/angular/angular/issues/12295