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注释，但它只接受一个加载器，组件，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}中的组件名称不匹配 和＆＃34;导出类TestingComponent＆＃34;

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