Geek Answers Handbook

Angular 2 Child Routing (v3) 'Unable to read property annotations' undefined'

I'm trying to play Angular 2 and run a test application, but I am having problems with the router working 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 start the application in order, but trying to click Profile routerLink results in an error:

"EXCEPTION: Error: impurity (in promise): TypeError: cannot read" annotations "of undefined properties"

If anyone can help me with this, it will be very appreciated.

+4
2

webpack :

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

, , , , :

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

LockedModule, PasswordModule. , , . , , .

+1

More articles:


All Articles