<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"><pre class="notranslate"><code class="notranslate">[x ] bug report =&gt; search github for a similar issue or PR before submitting
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong></p>
<p dir="auto">I am currently working on a project based on <a href="https://github.com/AngularClass/angular2-webpack-starter">https://github.com/AngularClass/angular2-webpack-starter</a>. Everything is working fin in dev deployement (npm run server:dev ).</p>
<p dir="auto">But after a <code class="notranslate">npm run build:prod</code> and <code class="notranslate">npm run server:prod</code> when I try to access to my app I have this js error :</p>
<p dir="auto"><a href="http://pasteboard.co/9llDiJNGv.png" rel="nofollow">http://pasteboard.co/9llDiJNGv.png</a></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="function _split(t) {
    return t.match(c)
}"><pre class="notranslate"><code class="notranslate">function _split(t) {
    return t.match(c)
}
</code></pre></div>
<p dir="auto">Currently after pretty print in chrome the error seem to be an error in my component routing somewhere. I will investigate more but I post this issue because is not normal that my code is working in dev but not in prod. If I find why I will post the answers here.</p>
<p dir="auto">Currently my routing look like:<br>
app.routes.ts:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="export const ROUTES: Routes = [
  { path: '', loadChildren: './app/&lt;componentName&gt;/&lt;componentName&gt;.module#&lt;componentName&gt;Module' },
  { path: '**',    component: NoContent },
];"><pre class="notranslate"><code class="notranslate">export const ROUTES: Routes = [
  { path: '', loadChildren: './app/&lt;componentName&gt;/&lt;componentName&gt;.module#&lt;componentName&gt;Module' },
  { path: '**',    component: NoContent },
];
</code></pre></div>
<p dir="auto">.routing.ts:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const routes: Routes = [
  { path: &quot;&quot;,
    component: &lt;componentName&gt;Component,
    children: [
      { path:&quot;&quot;, component: &lt;componentName&gt;ListComponent},
      { path:&quot;&lt;componentName2&gt;&quot;, component: &lt;componentName2&gt;},
      { path:&quot;&lt;componentName3&gt;&quot;, component: &lt;componentName3&gt;},
        { path:&quot;&lt;componentName4&gt;&quot;, component: &lt;componentName4&gt;},
        { path:&quot;&lt;componentName5&gt;&quot;, component: &lt;componentName5&gt;},
    ]
  }
];"><pre class="notranslate"><code class="notranslate">const routes: Routes = [
  { path: "",
    component: &lt;componentName&gt;Component,
    children: [
      { path:"", component: &lt;componentName&gt;ListComponent},
      { path:"&lt;componentName2&gt;", component: &lt;componentName2&gt;},
      { path:"&lt;componentName3&gt;", component: &lt;componentName3&gt;},
        { path:"&lt;componentName4&gt;", component: &lt;componentName4&gt;},
        { path:"&lt;componentName5&gt;", component: &lt;componentName5&gt;},
    ]
  }
];
</code></pre></div>
<p dir="auto"><strong>Expected behavior</strong><br>
No javascript error and my app working like in dev mode</p>
<p dir="auto"><strong>Reproduction of the problem</strong><br>
Can't see how.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
Having a working app</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
All operating system<br>
IDE -&gt; webstorm 2016.2.3<br>
package manager -&gt; npm<br>
HTTP server -&gt; node (windows) and nginx(linux)</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0</li>
<li><strong>Browser:</strong> [all ]</li>
<li><strong>Language:</strong> [TypeScript 2.0.3]</li>
<li><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =   v6.6.0 and v6.7.0</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></p>

<p dir="auto">Accessing a local components instance inside of a dynamically added component doesn't work. i.e. I load a component inside of an ngSwitch and then I want to reference the components instance to a local variable. However this doesn't seem to work.</p>
<p dir="auto"><strong>Expected behavior</strong></p>

<p dir="auto">You should be able to access any local components instance.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>

<p dir="auto"><a href="http://plnkr.co/edit/jKpVgdErsJc7VwVexIvq?p=preview" rel="nofollow">http://plnkr.co/edit/jKpVgdErsJc7VwVexIvq?p=preview</a><br>
Click the "Access foo" button - you'll see the inner instance of the foo component logged, but outside of the ngSwitch it cannot be accessed.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>

<p dir="auto">I'm guessing this is caused by the way *ngSwitchCase desugar's to a template tag, however it's not very obvious that this is the case by looking at the html structure. I'd expect to be able to create a local variable and reference it anywhere else in the components template.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>

<p dir="auto">N/A</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.X</li>
</ul>

<p dir="auto">2.4.4</p>
<ul dir="auto">
<li><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 ]</li>
</ul>

<p dir="auto">All</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]<br>
Typescript</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =<br>
N/A</p>
</li>
</ul>