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

Question

This is my setup:

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: '/'})]);

and I keep getting this error, any help is appreciated

I am using latest Beta.0

regards

Sean

Answer 1

I had met same issue,but I resolved by using the same component name used in the component definition and when import the component,eg:

definition

import {Component} from 'angular2/core';

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

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

import

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

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

I met the same issue when I tried to change the component name on import eg: issue

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

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

route

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

Answer 2

I had the same issue. My import was not surrounded by curly braces, so it was undefined. The problem is the cryptic error message, which should state that the component you provided is undefined for the @RouteConfig .

Answer 3

I had the same error but for an other reason. It's true that the error reporting is still very poor in ng2. The error: Route config should contain exactly one “component”, “loader”, or “redirectTo” property, really just means that what you have put in your routeConfig is not correct. In my case, my components were undefined. This due to a stupid order mistake.

I had this (component.ts)

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

And an import like this (trackerpanel.component)

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

And I was trying to use the components tracker and settings in routes defined in trackerpanel. This gave me undefined components, and the aforementioned error.

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

I changed it to

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

And this fixed my routing problem.

Answer 4

Same error i had faced but i have solved this as below:

when i write the code like this

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

it shows throws the same error you faced but after searching i have found error is in my Component attribute of routeConfig ie angular2 thinks we have write a Component annotation in the routeConfig but it accept only exactly one loader,component,redirectto (URL) property. but we have write something else , so when i changed Component with component code is working fine.

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

above line make my code working. It may not help to solve your problem because you have already write component insted of Component but i have posted this for others may be it will help to someone else thanks

Answer 5

In my case the problem was incorrectly imported child component. The component export was default:

export default class HomeComponent {}

So i replaced its import from

import { HomeComponent } from './homeComponent';

to

import HomeComponent from './homeComponent';

and it works!

Interesting that webpack which i use to bundle the app does not provide any errors/warnings.

Answer 6

In my case it was the mismatch of the component name in import {TestComponent} and "export class TestingComponent"

TestingComponent should be TestComponent.

Answer 7

I had the same issue just now. This had to do with me creating a component, and Webpack didn't recognize it.

After restarting Webpack the error went away..

Answer 8

Your NgModule should be changed from

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

To

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

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