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