<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">Plunkr: <a href="http://plnkr.co/edit/QPW3qrQmSPrDwwXYK6Wx?p=preview" rel="nofollow">http://plnkr.co/edit/QPW3qrQmSPrDwwXYK6Wx?p=preview</a></p>
<p dir="auto">Here shows an item detail page embeds a child view which exhibits the related items. When I click the related items to visit other item's detail page, the links of the tab("Overview" and "Related") doesn't update accordingly.</p>
<p dir="auto">When clicks "Item: 2", the link of the tab is still "/item/1/related".</p>
<p dir="auto"><strong>Expected/desired behavior</strong></p>
<p dir="auto">When clicks "Item: 2", the link of the tab should change to "/item/2/related".</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">Plunkr: <a href="http://plnkr.co/edit/QPW3qrQmSPrDwwXYK6Wx?p=preview" rel="nofollow">http://plnkr.co/edit/QPW3qrQmSPrDwwXYK6Wx?p=preview</a></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.4</li>
<li><strong>Angular Router version:</strong> 3.0.0-beta.2</li>
<li><strong>Browser:</strong> [ Chrome 51 ]</li>
<li><strong>Language:</strong> [TypeScript ]</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"><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><br>
White screen, no error in console nor in webpack's terminal output.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
At least a few text words in screen, it's basically a simple hello world, shouldn't fail without errors, it shouldn't even fail to begin with.</p>
<p dir="auto"><strong>Reproduction of the problem</strong><br>
I used this simple code, first <code class="notranslate">main.ts</code>:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// main.ts
import 'angular';
import {adapter} from './app';
import {App} from './app';

console.log(angular);

angular.module('ng1App', [])
.directive('myApp', function() {
  return {
    template: '&lt;ng2&gt;&lt;/ng2&gt;'
  }
})
.directive('ng2', adapter.downgradeNg2Component(App));

adapter.bootstrap(document.body, ['ng1App']).ready(function(){
  console.log('bootstrapped!');
});"><pre class="notranslate"><span class="pl-c">// main.ts</span>
<span class="pl-k">import</span> <span class="pl-s">'angular'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-s1">adapter</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./app'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">App</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./app'</span><span class="pl-kos">;</span>

<span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">angular</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-s1">angular</span><span class="pl-kos">.</span><span class="pl-en">module</span><span class="pl-kos">(</span><span class="pl-s">'ng1App'</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">)</span>
<span class="pl-kos">.</span><span class="pl-en">directive</span><span class="pl-kos">(</span><span class="pl-s">'myApp'</span><span class="pl-kos">,</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-kos">{</span>
    <span class="pl-c1">template</span>: <span class="pl-s">'&lt;ng2&gt;&lt;/ng2&gt;'</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-kos">.</span><span class="pl-en">directive</span><span class="pl-kos">(</span><span class="pl-s">'ng2'</span><span class="pl-kos">,</span> <span class="pl-s1">adapter</span><span class="pl-kos">.</span><span class="pl-en">downgradeNg2Component</span><span class="pl-kos">(</span><span class="pl-smi">App</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-s1">adapter</span><span class="pl-kos">.</span><span class="pl-en">bootstrap</span><span class="pl-kos">(</span><span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-c1">body</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-s">'ng1App'</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">ready</span><span class="pl-kos">(</span><span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">{</span>
  <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'bootstrapped!'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Next adapter import from <code class="notranslate">app/adapter.ts</code> through a barrel in <code class="notranslate">app</code>:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import {forwardRef} from '@angular/core';
import {UpgradeAdapter} from '@angular/upgrade';
import {AppModule} from './app.module';

export const adapter = new UpgradeAdapter(AppModule);"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-s1">forwardRef</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'@angular/core'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">UpgradeAdapter</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'@angular/upgrade'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">AppModule</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./app.module'</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">const</span> <span class="pl-s1">adapter</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-smi">UpgradeAdapter</span><span class="pl-kos">(</span><span class="pl-smi">AppModule</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Next app module in <code class="notranslate">app/app.module.ts</code>:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import {NgModule, ApplicationRef} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {RouterModule} from '@angular/router';

import {App} from './';
import {Home} from './home';

@NgModule({
  imports: [
    BrowserModule
  ],
  declarations: [
    App,
    Home
  ]
})
export class AppModule {}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">NgModule</span><span class="pl-kos">,</span> <span class="pl-smi">ApplicationRef</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'@angular/core'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">BrowserModule</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'@angular/platform-browser'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">RouterModule</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'@angular/router'</span><span class="pl-kos">;</span>

<span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">App</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">Home</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./home'</span><span class="pl-kos">;</span>

@<span class="pl-smi">NgModule</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">imports</span>: <span class="pl-kos">[</span>
    <span class="pl-smi">BrowserModule</span>
  <span class="pl-kos">]</span><span class="pl-kos">,</span>
  <span class="pl-c1">declarations</span>: <span class="pl-kos">[</span>
    <span class="pl-smi">App</span><span class="pl-kos">,</span>
    <span class="pl-smi">Home</span>
  <span class="pl-kos">]</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-smi">AppModule</span> <span class="pl-kos">{</span><span class="pl-kos">}</span></pre></div>
<p dir="auto">Next app component in <code class="notranslate">app/app.component.ts</code>:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { Component } from '@angular/core';

@Component({
  selector: 'ng2',
  template: `
    &lt;home&gt;&lt;/home&gt;
  `
})
export class App {
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-smi">Component</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'@angular/core'</span><span class="pl-kos">;</span>

@<span class="pl-smi">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">selector</span>: <span class="pl-s">'ng2'</span><span class="pl-kos">,</span>
  <span class="pl-c1">template</span>: <span class="pl-s">`</span>
<span class="pl-s">    &lt;home&gt;&lt;/home&gt;</span>
<span class="pl-s">  `</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-smi">App</span> <span class="pl-kos">{</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">Last home component which should be like a simple directive in <code class="notranslate">app/home.ts</code>:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import {Component} from '@angular/core';
import {adapter} from './adapter';

@Component({
  selector: 'home',
  template: `
    Welcome Home
  `
})
export class Home{ }"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">Component</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'@angular/core'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-s1">adapter</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./adapter'</span><span class="pl-kos">;</span>

@<span class="pl-smi">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">selector</span>: <span class="pl-s">'home'</span><span class="pl-kos">,</span>
  <span class="pl-c1">template</span>: <span class="pl-s">`</span>
<span class="pl-s">    Welcome Home</span>
<span class="pl-s">  `</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-smi">Home</span><span class="pl-kos">{</span> <span class="pl-kos">}</span></pre></div>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
OSX El Capitan, VSCode, NPM, http server -&gt; <code class="notranslate">gulp-connect</code></p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0</li>
<li><strong>Browser:</strong> [all | Chrome 53 ]</li>
<li><strong>Language:</strong> [TypeScript 2.0]</li>
</ul>