title: In page link reloads page
body: <p>I'm building my first Angular 2 app and I've come quite far now with a nice Webpack build system, routing, services and components in place.</p>
  
  <p>I tried adding a normal in page link (<code>[href^="#"]</code>) in one of my components, and as long as I'm on the home page (<code>/</code>) it works fine, but whenever I'm on a different URL the whole app reloads to the home page.</p>
  
  <p>Apparently this is a known issue (<a href="https://github.com/angular/angular/issues/6595" rel="nofollow">https://github.com/angular/angular/issues/6595</a>) but I need this to work right now so I'm hoping someone can teach me how.</p>
  
  <p>I'm not sure it'll help, but here's my Component's TS and HTML:</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { ROUTER_DIRECTIVES } from '@angular/router-deprecated';
  
  @Component({
      selector: 'home',
      template: require('./home.component.html'),
      directives: [ROUTER_DIRECTIVES]
  })
  export class HomeComponent {
  
  }
  
  &lt;section id="home" class="section section--full-height"&gt;
  
      &lt;h2&gt;Title of the home page&lt;/h2&gt;
  
      &lt;nav&gt;
          &lt;a [routerLink]="['Search']" class="button button--wide"&gt;Search&lt;/a&gt;
          &lt;a [routerLink]="['Search']"&gt;Quick try&lt;/a&gt;
      &lt;/nav&gt;
  
      &lt;footer&gt;
          &lt;a href="#home-2" class="icon-down icon--below"&gt;Heres how it works&lt;/a&gt;
      &lt;/footer&gt;
  
  &lt;/section&gt;
  
  &lt;section id="home-2" class="section section--full-height"&gt;
  
      &lt;h2&gt;Lorem ipsum dolor&lt;/h2&gt;
  
      &lt;img src="http://placehold.it/200x300"&gt;
  
  &lt;/section&gt;
  </code></pre>
  
  <p>As you can see it's the link "here's how it works" (or any other in page link - I have more than this one in reality) that only works (scrolls down to the linked element) when you're on the home page (<code>/</code>). If on any other URL, the link will reload the app.</p>