{"action":"created","issue":{"url":"https://api.github.com/repos/angular/angular/issues/9427","repository_url":"https://api.github.com/repos/angular/angular","labels_url":"https://api.github.com/repos/angular/angular/issues/9427/labels{/name}","comments_url":"https://api.github.com/repos/angular/angular/issues/9427/comments","events_url":"https://api.github.com/repos/angular/angular/issues/9427/events","html_url":"https://github.com/angular/angular/issues/9427","id":161588962,"number":9427,"title":"Cannot Asynchronously Load Components With `Annotations`","user":{"login":"datatypevoid","id":10481547,"avatar_url":"https://avatars.githubusercontent.com/u/10481547?v=3","gravatar_id":"","url":"https://api.github.com/users/datatypevoid","html_url":"https://github.com/datatypevoid","followers_url":"https://api.github.com/users/datatypevoid/followers","following_url":"https://api.github.com/users/datatypevoid/following{/other_user}","gists_url":"https://api.github.com/users/datatypevoid/gists{/gist_id}","starred_url":"https://api.github.com/users/datatypevoid/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/datatypevoid/subscriptions","organizations_url":"https://api.github.com/users/datatypevoid/orgs","repos_url":"https://api.github.com/users/datatypevoid/repos","events_url":"https://api.github.com/users/datatypevoid/events{/privacy}","received_events_url":"https://api.github.com/users/datatypevoid/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2016-06-22T03:57:21Z","updated_at":"2016-06-22T04:06:35Z","closed_at":"2016-06-22T04:06:35Z","body":"**I'm submitting a ...**  (check one with \"x\")\r\n```\r\n[ x ] bug report\r\n[ ] feature request\r\n[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question\r\n```\r\n\r\n**Current behavior**\r\n\r\nI am currently trying async load some components as is done in [angular2-webpack-starter](https://github.com/AngularClass/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:\r\n\r\n```\r\nEXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'annotations' of undefined\r\n```\r\n\r\n**Expected/desired behavior**\r\n\r\nTo be able to load guarded components asynchronously.\r\n\r\n**Reproduction of the problem**\r\nIf 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).\r\n\r\nI have provided some examples and insight as to the setup that is causing this issue here: https://github.com/AngularClass/webpack-toolkit/issues/1\r\n\r\nBasically, 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.\r\n\r\nTo demonstrate this problem you could create a guard for preventing the user from leaving the view with something along these lines:\r\n\r\n```\r\nimport { CanDeactivate } from '@angular/router';\r\nimport { Observable }    from 'rxjs/Observable';\r\nexport interface CanComponentDeactivate {\r\n canDeactivate: () => boolean | Observable<boolean>;\r\n}\r\nexport class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {\r\n  canDeactivate(component: CanComponentDeactivate): Observable<boolean> | boolean {\r\n    return component.canDeactivate ? component.canDeactivate() : true;\r\n  }\r\n```\r\n\r\nYou 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:\r\n\r\n```\r\ncanDeactivate(): Observable<boolean> | boolean {\r\n    // Ask the user with a confirmation dialog service\r\n    if(!this.userForm.pristine && !this.accepted) {\r\n      return confirm('You haven\\'t submitted your registration. Are you sure '\r\n                     + 'you want to navigate away from this page?'); }\r\n    else {\r\n      return true;\r\n    }\r\n  }\r\n```\r\n\r\nI have my routes configured as so:\r\n\r\n```\r\nimport { RouterConfig } from '@angular/router';\r\n\r\nimport { Home } from './home';\r\n\r\nimport { CanDeactivateGuard } from './shared/interfaces/can-deactivate.interface';\r\n\r\nexport const routes: RouterConfig = [\r\n  { path: '',         component: Home },\r\n  { path: 'home',     component: Home },\r\n  { path: 'about',    component: 'About' },\r\n  { path: 'register', component: 'Register', canDeactivate: [CanDeactivateGuard] }\r\n];\r\n\r\nexport const asyncRoutes = {\r\n  'About': require('es6-promise-loader!./about'),\r\n  'Register': require('es6-promise-loader!./register/register.component')\r\n};\r\n```\r\n\r\nAttempting to navigate to the `Register` component in this case produces the error above.\r\n\r\n**Please tell us about your environment:**\r\n\r\n* **Angular version:** 2.0.0-rc.3\r\n \r\n* **Browser:** [ Chrome 51 ] \r\n \r\n* **Language:** [ TypeScript 1.8.10 ] \r\n"},"comment":{"url":"https://api.github.com/repos/angular/angular/issues/comments/227637597","html_url":"https://github.com/angular/angular/issues/9427#issuecomment-227637597","issue_url":"https://api.github.com/repos/angular/angular/issues/9427","id":227637597,"user":{"login":"datatypevoid","id":10481547,"avatar_url":"https://avatars.githubusercontent.com/u/10481547?v=3","gravatar_id":"","url":"https://api.github.com/users/datatypevoid","html_url":"https://github.com/datatypevoid","followers_url":"https://api.github.com/users/datatypevoid/followers","following_url":"https://api.github.com/users/datatypevoid/following{/other_user}","gists_url":"https://api.github.com/users/datatypevoid/gists{/gist_id}","starred_url":"https://api.github.com/users/datatypevoid/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/datatypevoid/subscriptions","organizations_url":"https://api.github.com/users/datatypevoid/orgs","repos_url":"https://api.github.com/users/datatypevoid/repos","events_url":"https://api.github.com/users/datatypevoid/events{/privacy}","received_events_url":"https://api.github.com/users/datatypevoid/received_events","type":"User","site_admin":false},"created_at":"2016-06-22T04:06:35Z","updated_at":"2016-06-22T04:06:35Z","body":"Closing since it's a duplicate."}}
{"actor":{"display_login":"datatypevoid"}}