<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 =&gt; search github for a similar issue or PR before submitting
[ ] 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 =&gt; search github for a similar issue or PR before submitting
[ ] 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><br>
Consider the following minimal router set up</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
        path: '', component: Component1,
        children: [
            { path: 'route1', loadChildren:() =&gt;  Module1  },
        ]
    }
]"><pre lang="const" class="notranslate"><code class="notranslate">{
        path: '', component: Component1,
        children: [
            { path: 'route1', loadChildren:() =&gt;  Module1  },
        ]
    }
]
</code></pre></div>
<p dir="auto">The JIT compiler fails at <strong>angular/core/bundles/core.umd.js line 2049</strong> because arrow functions do not have the prototype property.</p>
<p dir="auto">Changing the lazy loading to use the es5 function syntax solves the problem</p>
<p dir="auto"><strong>Expected behavior</strong><br>
Should be able to use es6 arrow function for lazy loading a module</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>
<ul dir="auto">
<li>Create an angular project using version 2.4.10</li>
<li>Add a router config that includes loadChildren using arrow function</li>
<li>Run <code class="notranslate">npm start</code></li>
</ul>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
Since angular supports es6, we should be allowed to take advantage of arrow function definition for lazy loading</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<ul dir="auto">
<li>OS - Windows 8</li>
<li>IDE: Visual Stidio Code</li>
<li>Package Manager: npm</li>
<li>HTTP server: lite-sever(dev)</li>
</ul>
<p dir="auto"><strong>Angular version:</strong> 2.4.10</p>
<p dir="auto"><strong>Browser:</strong> [ Chrome Latest ]</p>
<p dir="auto"><strong>Language:</strong> [TypeScript]</p>
<p dir="auto"><strong>Node (for AoT issues):</strong> = 4.2.6</p>
<p dir="auto">If I set something like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;red&gt;This component should have the 'red' css class&lt;/red&gt;

@Component({
    selector: 'red',
    template : `&lt;div [ngClass]=&quot;getClasses()&quot;&gt;&lt;ng-content&gt;&lt;/ng-content&gt;&lt;/div&gt;`
})
export class RedComponent {
    getClasses() {
        return {
            'red' : true
        };
    }
}"><pre class="notranslate"><code class="notranslate">&lt;red&gt;This component should have the 'red' css class&lt;/red&gt;

@Component({
    selector: 'red',
    template : `&lt;div [ngClass]="getClasses()"&gt;&lt;ng-content&gt;&lt;/ng-content&gt;&lt;/div&gt;`
})
export class RedComponent {
    getClasses() {
        return {
            'red' : true
        };
    }
}
</code></pre></div>
<p dir="auto">This is working during the first "digest", but the second (Dev mode) is removing the class.</p>
<p dir="auto">If I do something like this, this is working.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@Component({
    selector: 'red',
    template : `&lt;div [ngClass]=&quot;getClasses()&quot;&gt;&lt;ng-content&gt;&lt;/ng-content&gt;&lt;/div&gt;`
})
export class RedComponent {
    classes: {
        'red' : true
    };

    getClasses() {
        return classes;
    }
}"><pre class="notranslate"><code class="notranslate">@Component({
    selector: 'red',
    template : `&lt;div [ngClass]="getClasses()"&gt;&lt;ng-content&gt;&lt;/ng-content&gt;&lt;/div&gt;`
})
export class RedComponent {
    classes: {
        'red' : true
    };

    getClasses() {
        return classes;
    }
}
</code></pre></div>
<p dir="auto">I think this is a bug, because dev mode shouldn't impact the resulting output.</p>