MoSheikh MoSheikh - 2 months ago 17
Javascript Question

Angular 2 Child Routing (v3) 'Cannot read property 'annotations' of undefined'

I'm trying to play around in Angular 2 and get a test app running but I'm having some problems getting the routing to work in the latest version of the router (3.0.0 alpha-7).

main.ts:

import {bootstrap} from '@angular/platform-browser-dynamic';
import {AppComponent} from './app.component';
import {APP_ROUTER_PROVIDERS} from './app.routes';

bootstrap(AppComponent, [APP_ROUTER_PROVIDERS]);


app.component.ts:

import {Component} from '@angular/core';
import {ROUTER_DIRECTIVES} from '@angular/router';

@Component({
selector: 'my-app',
template: `
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES]
})
export class AppComponent { }


app.routes.ts:

import {provideRouter, RouterConfig} from '@angular/router';
import {SigninRoutes} from './signin/signin.routes';

export const AppRoutes: RouterConfig = [
...SigninRoutes
]

export const APP_ROUTER_PROVIDERS = [
provideRouter(AppRoutes)
];


signin.component.ts:

import {Component} from '@angular/core';
import {ROUTER_DIRECTIVES} from '@angular/router';

@Component({
selector: 'signin',
template: `
<a [routerLink]="['/signin']">Sign In</a>
<a [routerLink]="['/profile']">Profile</a>
<br><br>Sign In Test
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES]
})

export class SigninComponent {

}


signin.routes.ts:

import {Component} from '@angular/core';
import {ROUTER_DIRECTIVES} from '@angular/router';

@Component({
selector: 'signin',
template: `
<a [routerLink]="['/signin']">Sign In</a>
<a [routerLink]="['/profile']">Profile</a>
<br><br>Sign In Test
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES]
})

export class SigninComponent {

}


profile.component.ts:

import {Component} from '@angular/core';

@Component ({
selector: 'profile',
template: `
Profile Test
`

})

export class ProfileComponent {

}


For some reason, I can initiate the app alright, but attempting to click the Profile routerLink results in the error:

"EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'annotations' of undefined"

If anyone could help me out with this, it'd be much appreciated.

Answer

Sounds like:

Similar issues:

Check for common errors:

  • Ensure you don't have / in path of your routes
  • Ensure every route has one of component, redirectTo, children
  • Ensure the components used in the routes are properly imported to the files where the routes are defined
Comments