Cannot Asynchronously Load Components With `Annotations`

[datatypevoid]

I'm submitting a ... (check one with "x")

[ x ] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

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

Expected/desired behavior

To be able to load guarded components asynchronously.

Reproduction of the problem
If the current behavior is a bug or you can illustrate your feature request better with an example, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5).

I have provided some examples and insight as to the setup that is causing this issue here: AngularClass/webpack-toolkit#1

Basically, I followed the example for creating a canDeactivate guard following the docs for the 3.0.0-alpha.7 router, and it works fine when loaded normally, but errors when loaded asynchronously.

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.

Please tell us about your environment:

• Angular version: 2.0.0-rc.3
• Browser: [ Chrome 51 ]
• Language: [ TypeScript 1.8.10 ]

[ericmartinezr]

@datatypevoid fwiw this is because of passing an undefined component, I reported this error message over here #9414

[datatypevoid]

Closing since it's a duplicate.

[ericmartinezr]

@datatypevoid I'm not entirely sure it's a duplicate. Although the error message is the same, you may have found something else failing that's being shadowed by that error. (tbh I haven't checked your issue, I just wanted to point out what's the cause of the error message).

[datatypevoid]

I believe this was user error not on the part of Angular 2 after further investigation.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}