Angular 2 Router error, the route configuration must contain exactly one property "component", "bootloader" or "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 the latest version of Beta.0

considers

Sean

Answer 1

I had the same problem, but I decided to use the same component name that is used in the component definition and when importing the component, for example:

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 problem when I tried to change the component name during import, for example: issue

 import {RegisterComponent} from './register.component'; /*remove`Page` from the name ,it should be RegisterPageComponent*/ 

way

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

Answer 2

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

Answer 3

I had the same error, but for a different reason. It is true that error reporting is still very low in ng2. Error: The route configuration must contain exactly one property “component”, “bootloader” or “redirectTo”, in fact, it simply means that what you put in your routeConfig is incorrect. In my case, my components were undefined. This is due to a stupid 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 such import (trackerpanel.component)

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

And I tried to use component tracking and settings in the routes defined in the tracker panel. This gave me undefined components and the above 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 that fixed my routing problem.

Answer 4

The same error that I encountered, but I solved it as shown below:

when I write code like this

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

it shows throws the same error you encountered, but after searching, I found that there was an error in my Component attribute for routeConfig, i.e. angular2 believes that we write component annotations in routeConfig, but it only accepts exactly one loader, component, redirectto (URL). but we are writing something else, so when I changed Component to Component , the code works fine.

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

above, my code works. It may not help solve your problem, because you already recorded the Instent component, but I published it for others, it may help someone else to thank

Answer 5

In my case, the problem was incorrectly imported by the child component. Export default component:

 export default class HomeComponent {} 

So, I replaced its import from

 import { HomeComponent } from './homeComponent'; 

to

 import HomeComponent from './homeComponent'; 

and it works!

Interestingly, the web package that I use to link the application does not contain any errors / warnings.

Answer 6

In my case, it was a mismatch of the component name in the {TestComponent} import and the "TestComponent testing class"

TestingComponent must be TestComponent.

Answer 7

I had the same problem just now. This is because I created the component, and Webpack did not recognize it.

After rebooting Webpack, the error disappeared.

Answer 8

Your NgModule must be changed from

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

For

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

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