<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">Given a module using the RouterModule:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@NgModule({
  declarations: [
    AppComponent,
    UsersComponent,
    UserComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot([
      { path: '', component: HomeComponent},
      { path: 'users', component: UsersComponent}
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }"><pre class="notranslate">@<span class="pl-smi">NgModule</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">AppComponent</span><span class="pl-kos">,</span>
    <span class="pl-smi">UsersComponent</span><span class="pl-kos">,</span>
    <span class="pl-smi">UserComponent</span><span class="pl-kos">,</span>
    <span class="pl-smi">HomeComponent</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-smi">FormsModule</span><span class="pl-kos">,</span>
    <span class="pl-smi">HttpModule</span><span class="pl-kos">,</span>
    <span class="pl-smi">RouterModule</span><span class="pl-kos">.</span><span class="pl-en">forRoot</span><span class="pl-kos">(</span><span class="pl-kos">[</span>
      <span class="pl-kos">{</span> <span class="pl-c1">path</span>: <span class="pl-s">''</span><span class="pl-kos">,</span> <span class="pl-c1">component</span>: <span class="pl-smi">HomeComponent</span><span class="pl-kos">}</span><span class="pl-kos">,</span>
      <span class="pl-kos">{</span> <span class="pl-c1">path</span>: <span class="pl-s">'users'</span><span class="pl-kos">,</span> <span class="pl-c1">component</span>: <span class="pl-smi">UsersComponent</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-c1">providers</span>: <span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
  <span class="pl-c1">bootstrap</span>: <span class="pl-kos">[</span><span class="pl-smi">AppComponent</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"><code class="notranslate">UsersComponent</code> uses <code class="notranslate">UserComponent</code> and a <code class="notranslate">RouterLink</code> in its template:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;app-user&gt;&lt;/app-user&gt;
&lt;a routerLink=&quot;/&quot;&gt;Home&lt;/a&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">app-user</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">app-user</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">a</span> <span class="pl-c1">routerLink</span>="<span class="pl-s">/</span>"<span class="pl-kos">&gt;</span>Home<span class="pl-kos">&lt;/</span><span class="pl-ent">a</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">whereas <code class="notranslate">UserComponent</code> is just plain HTML for this repro.</p>
<p dir="auto">Testing a simple component using Angular 2.1.0 and Router ~3.0.0<br>
for a component using <code class="notranslate">routerLink</code> in its template like <code class="notranslate">UsersComponent</code>, we had to add <code class="notranslate">RouterTestingModule</code> in the imports of the testing module:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppModule } from '../app.module';
import { UsersComponent } from './users.component';

describe('Component: Users', () =&gt; {
  beforeEach(() =&gt; {
    TestBed.configureTestingModule({
      imports: [AppModule, RouterTestingModule],
    });
  });

  it('should create the component', () =&gt; {
    let fixture = TestBed.createComponent(UsersComponent);
    let app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  });
});"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-smi">TestBed</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'@angular/core/testing'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-smi">RouterTestingModule</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'@angular/router/testing'</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">import</span> <span class="pl-kos">{</span> <span class="pl-smi">UsersComponent</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./users.component'</span><span class="pl-kos">;</span>

<span class="pl-en">describe</span><span class="pl-kos">(</span><span class="pl-s">'Component: Users'</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-en">beforeEach</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-smi">TestBed</span><span class="pl-kos">.</span><span class="pl-en">configureTestingModule</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">AppModule</span><span class="pl-kos">,</span> <span class="pl-smi">RouterTestingModule</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-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-en">it</span><span class="pl-kos">(</span><span class="pl-s">'should create the component'</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">let</span> <span class="pl-s1">fixture</span> <span class="pl-c1">=</span> <span class="pl-smi">TestBed</span><span class="pl-kos">.</span><span class="pl-en">createComponent</span><span class="pl-kos">(</span><span class="pl-smi">UsersComponent</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">let</span> <span class="pl-s1">app</span> <span class="pl-c1">=</span> <span class="pl-s1">fixture</span><span class="pl-kos">.</span><span class="pl-c1">debugElement</span><span class="pl-kos">.</span><span class="pl-c1">componentInstance</span><span class="pl-kos">;</span>
    <span class="pl-en">expect</span><span class="pl-kos">(</span><span class="pl-s1">app</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">toBeTruthy</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-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">whereas for a "dumb" component like <code class="notranslate">UserComponent</code> we did not:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { TestBed } from '@angular/core/testing';
import { AppModule } from '../app.module';
import { UserComponent } from './user.component';

describe('Component: User', () =&gt; {
  beforeEach(() =&gt; {
    TestBed.configureTestingModule({
      imports: [AppModule],
    });
  });

  it('should create the component', () =&gt; {
    let fixture = TestBed.createComponent(UserComponent);
    let app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  });
});"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-smi">TestBed</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'@angular/core/testing'</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">import</span> <span class="pl-kos">{</span> <span class="pl-smi">UserComponent</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./user.component'</span><span class="pl-kos">;</span>

<span class="pl-en">describe</span><span class="pl-kos">(</span><span class="pl-s">'Component: User'</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-en">beforeEach</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-smi">TestBed</span><span class="pl-kos">.</span><span class="pl-en">configureTestingModule</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">AppModule</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-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-en">it</span><span class="pl-kos">(</span><span class="pl-s">'should create the component'</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">let</span> <span class="pl-s1">fixture</span> <span class="pl-c1">=</span> <span class="pl-smi">TestBed</span><span class="pl-kos">.</span><span class="pl-en">createComponent</span><span class="pl-kos">(</span><span class="pl-smi">UserComponent</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">let</span> <span class="pl-s1">app</span> <span class="pl-c1">=</span> <span class="pl-s1">fixture</span><span class="pl-kos">.</span><span class="pl-c1">debugElement</span><span class="pl-kos">.</span><span class="pl-c1">componentInstance</span><span class="pl-kos">;</span>
    <span class="pl-en">expect</span><span class="pl-kos">(</span><span class="pl-s1">app</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">toBeTruthy</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-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>Now, using the router 3.1.0, the above test throws:<br>
<code class="notranslate">No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.</code></strong></p>
<p dir="auto">This can be fixed by adding the <code class="notranslate">RouterTestingModule</code> in the imports of the testing module for the dumb component too, but this is a regression/breaking change compared to the behavior we used to have.</p>
<p dir="auto"><strong>Expected behavior</strong></p>

<p dir="auto">We should be able to test a component that does not rely on <code class="notranslate">routerLink</code> without having to import the <code class="notranslate">RouterTestingModule</code> as we used to.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
See above</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>

<p dir="auto">MacOSX</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.X<br>
Angular 2.1.0, Router 3.1.0</li>
<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 ]<br>
All</li>
<li><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]<br>
All</li>
<li><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =</li>
</ul>
<ul class="contains-task-list">
<li><strong>I'm submitting a ...</strong></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> bug report</li>
</ul>
<p dir="auto"><strong>Current behavior</strong><br>
Angular may be performing unnecessary duplicate work when starting up the app. I would expect that the <em>first</em> time that a component is encountered that it's "compiled" (the template string parsed and the JS code generated) and after that it's re-used if and when the component is encountered again.</p>
<p dir="auto">But if you use templateUrl you will see the same template file being requested over and over which suggests this may not be the case. For example, I have a price display component which is used in multiple places and the template can be requested 8+ times or more. Is it being re-parsed and re-built each time?</p>
<p dir="auto">It seems unnecessary and wasteful.</p>
<p dir="auto"><strong>Expected/desired behavior</strong><br>
Any templateUrl should be requested no more than once.</p>
<ul dir="auto">
<li><strong>What is the expected behavior?</strong><br>
Still only request the templateUrl once (erm, maybe the issue template doesn't need this same heading repeated?)</li>
<li><strong>What is the motivation / use case for changing the behavior?</strong><br>
Optimize behavior</li>
<li><strong>Angular version:</strong> 2.0.0-beta.X<br>
2.0.0-RC-1</li>
</ul>