Cannot Asynchronously Load Components With Annotations

[datatypevoid]

• *I'm submitting a ... *

  [ x ] bug report

  [ ] feature request

  [ ] question about the decisions made in the repository

• What is the current behavior?

I am currently trying async load some components as is done in angular2-webpack-starter. These components are using guards similar to the examples in the router 3.0.0-alpha.7 docs, and upon attempting to navigate to the async component, I get the error:

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

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via
• https://plnkr.co, https://codepen.io, or similar.

To demonstrate this problem you could create a guard for preventing the user from leaving the view with something along these lines:

import { CanDeactivate } from '@angular/router';
import { Observable }    from 'rxjs/Observable';
export interface CanComponentDeactivate {
 canDeactivate: () => boolean | Observable<boolean>;
}
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
  canDeactivate(component: CanComponentDeactivate): Observable<boolean> | boolean {
    return component.canDeactivate ? component.canDeactivate() : true;
  }

You might then implement that guard like so on a component to prevent the user from navigating away from a form before submitting it, for example:

canDeactivate(): Observable<boolean> | boolean {
    // Ask the user with a confirmation dialog service
    if(!this.userForm.pristine && !this.accepted) {
      return confirm('You haven\'t submitted your registration. Are you sure '
                     + 'you want to navigate away from this page?'); }
    else {
      return true;
    }
  }

I have my routes configured as so:

import { RouterConfig } from '@angular/router';

import { Home } from './home';

import { CanDeactivateGuard } from './shared/interfaces/can-deactivate.interface';

export const routes: RouterConfig = [
  { path: '',         component: Home },
  { path: 'home',     component: Home },
  { path: 'about',    component: 'About' },
  { path: 'register', component: 'Register', canDeactivate: [CanDeactivateGuard] }
];

export const asyncRoutes = {
  'About': require('es6-promise-loader!./about'),
  'Register': require('es6-promise-loader!./register/register.component')
};

Attempting to navigate to the Register component in this case produces the error above.

• What is the expected behavior?

To be able to load guarded components asynchronously.

• Please tell us about your environment:
• Angular version: 2.0.0-RC.2
• Browser: [Chrome XX ]
• Node: 5.11.1
• NPM: 3.8.6

[PatrickJS]

can you create an issue in the angular2 repo and mention this issue?
https://github.com/angular/angular/issues/new

[PatrickJS]

@datatypevoid shouldn't CanDeactivateGuard be a service rather than an interface?

[datatypevoid]

I just followed their examples in the docs. It works fine when loaded normally. I'll open the issue though, thanks!

[datatypevoid]

The same error is reported here, but it may or may not be related: angular/angular#9414

[datatypevoid]

The setup I have described in the issue is working fine now after pulling PatrickJS/PatrickJS-starter@01e4533

I have both a canActivate and canDeactivate guard implemented on two separate components and they both seem to load and work fine now.

[PatrickJS]

@datatypevoid is your Register component exported as export default Register or export class Register {}?

[datatypevoid]

export class Register { ... }

[PatrickJS]

can you provide a link reproducing the issue?

[PatrickJS]

I created a repo but wasn't able to reproduce the error
https://github.com/gdi2290/ng2-webpack-error-annotations-of-undefined

[datatypevoid]

I don't seem to be able to either... I am starting to think I must have fat fingered something initially, but I copied and pasted the example code right from my project at the time. I guess if I manage to come up with something I will let you know. Sorry for wasting you time!

[PatrickJS]

no worries