<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>
After upgrading from 2.2.1 to 2.4.1 <code class="notranslate">loadChildren: () =&gt; Module</code> in routes does not work anymore. Before upgrade I was able to use this construction to delegate certain route to external module. I did not use lazy loading. I used <code class="notranslate">loadChildren</code> to separate application parts.</p>
<p dir="auto">Error in console:<br>
<code class="notranslate">Uncaught TypeError: Cannot convert undefined or null to object</code></p>
<p dir="auto">thrown in:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="	        ReflectionCapabilities.prototype.annotations = function (typeOrFunc) {
	            var /** @type {?} */ parentCtor = Object.getPrototypeOf(typeOrFunc.prototype).constructor;
	            var /** @type {?} */ ownAnnotations = this._ownAnnotations(typeOrFunc, parentCtor) || [];
	            var /** @type {?} */ parentAnnotations = parentCtor !== Object ? this.annotations(parentCtor) : [];
	            return parentAnnotations.concat(ownAnnotations);
	        };"><pre class="notranslate"><code class="notranslate">	        ReflectionCapabilities.prototype.annotations = function (typeOrFunc) {
	            var /** @type {?} */ parentCtor = Object.getPrototypeOf(typeOrFunc.prototype).constructor;
	            var /** @type {?} */ ownAnnotations = this._ownAnnotations(typeOrFunc, parentCtor) || [];
	            var /** @type {?} */ parentAnnotations = parentCtor !== Object ? this.annotations(parentCtor) : [];
	            return parentAnnotations.concat(ownAnnotations);
	        };
</code></pre></div>
<p dir="auto">On the second line. <code class="notranslate">typeOrFunc</code> is my <code class="notranslate">() =&gt; Module</code>. It does not have <code class="notranslate">prototype</code> property.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
No idea how it worked before, but it did. I was able to navigate between modules, no errors were thrown.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
I used this scheme in my previous submission about DI. The repo is the same:<br>
<a href="https://github.com/peku33/angular2-dependency-injection-failure">https://github.com/peku33/angular2-dependency-injection-failure</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
I want to use <code class="notranslate">loadChildren()</code> to logically separate parts of my app. I'm not using "lazy loading".</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
Node v7.2.0<br>
Npm 3.10.9<br>
@angular/ [everything] @2.4.1<br>
webpack@1.14.0</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.X</li>
</ul>

<ul dir="auto">
<li>
<p dir="auto"><strong>Browser:</strong> [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]<br>
Same on Chrome and Firefox</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5] Version 2.1.4, ES6</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =</p>
</li>
</ul>
<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>
If you add an object instance to your route definition, the app fails to load with the error <code class="notranslate">Cannot convert undefined or null to object</code> with the stack trace:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    at Function.getPrototypeOf (&lt;anonymous&gt;)
    at ReflectionCapabilities.annotations (http://localhost:4200/main.bundle.js:60005:50)
    at Reflector.annotations (http://localhost:4200/main.bundle.js:60197:44)
    at DirectiveResolver.isDirective (http://localhost:4200/main.bundle.js:18021:61)
    at http://localhost:4200/main.bundle.js:19618:42
    at Array.forEach (native)
    at CompileMetadataResolver._getEntryComponentsFromProvider (http://localhost:4200/main.bundle.js:19617:30)
    at http://localhost:4200/main.bundle.js:19590:83
    at Array.forEach (native)
    at CompileMetadataResolver._getProvidersMetadata (http://localhost:4200/main.bundle.js:19560:19)
    at http://localhost:4200/main.bundle.js:19562:23
    at Array.forEach (native)
    at CompileMetadataResolver._getProvidersMetadata (http://localhost:4200/main.bundle.js:19560:19)
    at http://localhost:4200/main.bundle.js:19198:63
    at Array.forEach (native)"><pre lang="Uncaught" class="notranslate"><code class="notranslate">    at Function.getPrototypeOf (&lt;anonymous&gt;)
    at ReflectionCapabilities.annotations (http://localhost:4200/main.bundle.js:60005:50)
    at Reflector.annotations (http://localhost:4200/main.bundle.js:60197:44)
    at DirectiveResolver.isDirective (http://localhost:4200/main.bundle.js:18021:61)
    at http://localhost:4200/main.bundle.js:19618:42
    at Array.forEach (native)
    at CompileMetadataResolver._getEntryComponentsFromProvider (http://localhost:4200/main.bundle.js:19617:30)
    at http://localhost:4200/main.bundle.js:19590:83
    at Array.forEach (native)
    at CompileMetadataResolver._getProvidersMetadata (http://localhost:4200/main.bundle.js:19560:19)
    at http://localhost:4200/main.bundle.js:19562:23
    at Array.forEach (native)
    at CompileMetadataResolver._getProvidersMetadata (http://localhost:4200/main.bundle.js:19560:19)
    at http://localhost:4200/main.bundle.js:19198:63
    at Array.forEach (native)
</code></pre></div>
<p dir="auto">The error ist thrown because <code class="notranslate">ReflectionCapabilities.annotations</code> tries to access the <code class="notranslate">prototype</code> of the passed variable which in this case is an object instance so fails.</p>
<p dir="auto">This worked in 2.2.4 but fails with 2.3.1. It fails for a webpack build, I haven't tried any other build tools.</p>
<p dir="auto"><strong>Expected behavior</strong></p>
<p dir="auto">The user should be able to add arbitrary properties to route entries without causing compilation errors.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>
<p dir="auto">Add an object instance to a route definition like:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import { SomeObject } from &quot;./some-object.model&quot;;

const routes: any = [
  {
    path: '',
    children: [],
    data: {
      otherProperty: new SomeObject(),
    }
  }
];"><pre class="notranslate"><code class="notranslate">import { SomeObject } from "./some-object.model";

const routes: any = [
  {
    path: '',
    children: [],
    data: {
      otherProperty: new SomeObject(),
    }
  }
];
</code></pre></div>
<p dir="auto">see <a href="https://github.com/marcuskrahl/angular-bug-route-with-object-instance">https://github.com/marcuskrahl/angular-bug-route-with-object-instance</a> for an example repository</p>
<p dir="auto"><strong>Workaround</strong><br>
If the object instance creation is replaced with a function call, the example works without any problems (but of course the access of the data has to be changed).</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="...
    data: {
      otherProperty:  () =&gt; new SomeObject(),
    }
..."><pre class="notranslate"><code class="notranslate">...
    data: {
      otherProperty:  () =&gt; new SomeObject(),
    }
...
</code></pre></div>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>
<p dir="auto">You should be able to add application dependant information to routing entries.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<p dir="auto">angular-cli changed to 2.3.1 runtime on Windows 7.<br>
Also does not work on custom webpack build without angular-cli.</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.3.1</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> [all]</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> [TypeScript 2.0.10]</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =</p>
</li>
</ul>