Angular 2 Router error, Route config should contain exactly one “component”, “loader”, or “redirectTo” property

Question

This is my setup:

import {bootstrap} from \'angular2/platform/browser\';
import {Component} from \'angular2/core\';
import {LocationStrategy, APP_BASE_HREF,          


        

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

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

Answer 3

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 4

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 5

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 6

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 i.e 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