<p dir="auto">The <code class="notranslate">dart2js</code> build step for apps with large numbers of components (&gt;500) is running out of memory.</p>
<p dir="auto">Abstracting duplicated and boilerplate code out of generated change detectors and into utilities and/or <code class="notranslate">AbstractChangeDetector</code> will give <code class="notranslate">dart2js</code> less code to process and should help with memory pressure.</p>
<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[ x ] bug report
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[ x ] bug report
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong></p>
<p dir="auto">I am currently trying async load some components as is done in <a href="https://github.com/AngularClass/angular2-webpack-starter">angular2-webpack-starter</a>. These components are using <code class="notranslate">guards</code> similar to the examples in the <code class="notranslate">router</code> <code class="notranslate">3.0.0-alpha.7</code> docs, and upon attempting to navigate to the async component, I get the error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'annotations' of undefined"><pre class="notranslate"><code class="notranslate">EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'annotations' of undefined
</code></pre></div>
<p dir="auto"><strong>Expected/desired behavior</strong></p>
<p dir="auto">To be able to load guarded components asynchronously.</p>
<p dir="auto"><strong>Reproduction of the problem</strong><br>
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 <a href="https://plnkr.co" rel="nofollow">https://plnkr.co</a> or similar (you can use this template as a starting point: <a href="http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5" rel="nofollow">http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5</a>).</p>
<p dir="auto">I have provided some examples and insight as to the setup that is causing this issue here: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="161576834" data-permission-text="Title is private" data-url="https://github.com/AngularClass/webpack-toolkit/issues/1" data-hovercard-type="issue" data-hovercard-url="/AngularClass/webpack-toolkit/issues/1/hovercard" href="https://github.com/AngularClass/webpack-toolkit/issues/1">AngularClass/webpack-toolkit#1</a></p>
<p dir="auto">Basically, I followed the example for creating a canDeactivate guard following the docs for the <code class="notranslate">3.0.0-alpha.7</code> router, and it works fine when loaded normally, but errors when loaded asynchronously.</p>
<p dir="auto">To demonstrate this problem you could create a guard for preventing the user from leaving the view with something along these lines:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import { CanDeactivate } from '@angular/router';
import { Observable }    from 'rxjs/Observable';
export interface CanComponentDeactivate {
 canDeactivate: () =&gt; boolean | Observable&lt;boolean&gt;;
}
export class CanDeactivateGuard implements CanDeactivate&lt;CanComponentDeactivate&gt; {
  canDeactivate(component: CanComponentDeactivate): Observable&lt;boolean&gt; | boolean {
    return component.canDeactivate ? component.canDeactivate() : true;
  }"><pre class="notranslate"><code class="notranslate">import { CanDeactivate } from '@angular/router';
import { Observable }    from 'rxjs/Observable';
export interface CanComponentDeactivate {
 canDeactivate: () =&gt; boolean | Observable&lt;boolean&gt;;
}
export class CanDeactivateGuard implements CanDeactivate&lt;CanComponentDeactivate&gt; {
  canDeactivate(component: CanComponentDeactivate): Observable&lt;boolean&gt; | boolean {
    return component.canDeactivate ? component.canDeactivate() : true;
  }
</code></pre></div>
<p dir="auto">You might then implement that guard like so on a <code class="notranslate">component</code> to prevent the user from navigating away from a form before submitting it, for example:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="canDeactivate(): Observable&lt;boolean&gt; | boolean {
    // Ask the user with a confirmation dialog service
    if(!this.userForm.pristine &amp;&amp; !this.accepted) {
      return confirm('You haven\'t submitted your registration. Are you sure '
                     + 'you want to navigate away from this page?'); }
    else {
      return true;
    }
  }"><pre class="notranslate"><code class="notranslate">canDeactivate(): Observable&lt;boolean&gt; | boolean {
    // Ask the user with a confirmation dialog service
    if(!this.userForm.pristine &amp;&amp; !this.accepted) {
      return confirm('You haven\'t submitted your registration. Are you sure '
                     + 'you want to navigate away from this page?'); }
    else {
      return true;
    }
  }
</code></pre></div>
<p dir="auto">I have my routes configured as so:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="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')
};"><pre class="notranslate"><code class="notranslate">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')
};
</code></pre></div>
<p dir="auto">Attempting to navigate to the <code class="notranslate">Register</code> component in this case produces the error above.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0-rc.3</li>
<li><strong>Browser:</strong> [ Chrome 51 ]</li>
<li><strong>Language:</strong> [ TypeScript 1.8.10 ]</li>
</ul>