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.

回答1:

Sounds like:

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

Similar issues:

https://github.com/angular/angular/issues/9427
https://github.com/AngularClass/webpack-toolkit/issues/1

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

回答2:

I had this error using webpack and trying to asynchronously load routes like so:

{
 path: 'password', loadChildren: () => new Promise(resolve => {
   (require as any).ensure([], require => {
     resolve(require('./password/password.module').PasswordModule);
   });
 })
},

Nothing wrong with the above code but then look at the module I thought I was loading:

@NgModule({
imports: [
 CommonModule,
 ...
],
declarations: [
  ...
],
providers: [
 ...
]
})
export class LockedModule {}  // wrong name !!!!

Notice the name of the module, LockedModule, it should be PasswordModule. I stumbled onto this and it took me a while to find. It's not very often I scroll to the bottom and verify the export name and the debug window gave me no indication that this was the cause.

来源：https://stackoverflow.com/questions/38065325/angular-2-child-routing-v3-cannot-read-property-annotations-of-undefined

标签

javascript

typescript

angular

angular2-routing