title: Angular 4 routing with infinite /#/ in url
body: <p>Since some days I have this issue with Angular CLI and Routing.
  If you point to the exact url, it seems work fine.
  When you try to redirect with routerLink, it writes infinite /#page in the url.
  If you are on index and try to go to about page it writes <a href="http://baseurl/index#/about#/index#/index#/index#/index#/index#/index#/index#/" rel="nofollow noreferrer">http://baseurl/index#/about#/index#/index#/index#/index#/index#/index#/index#/</a>... and goes on until finish the RAM :D</p>
  
  <p>This problem is only in devmode with "ng serve" (but works with hashlocationstrategy). In production mode seems work fine.</p>
  
  <p>Here some codes.</p>
  
  <p>in index.html</p>
  
  <pre><code>&lt;base href="/"&gt;
  </code></pre>
  
  <p>app.module</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { FormsModule } from '@angular/forms';
  import { HttpModule } from '@angular/http';
  import { RouterModule } from '@angular/router';
  
  import { AppComponent } from './app.component';
  
  import { ConnectionService, ownerEnums, requestIdEnums } from './services/connection.service';
  import { AuthService } from './services/auth.service';
  
  import { AboutComponent } from './about/about.component';
  import { ConnectComponent } from './connect/connect.component';
  import { LayoutComponent } from './layout/layout.component';
  
  import { HeaderComponent } from './layout/header/header.component';
  import { BreadcrumbComponent } from './layout/breadcrumb/breadcrumb.component';
  import { FooterComponent } from './layout/footer/footer.component';
  import { IndexComponent } from './layout/index/index.component';
  
  @NgModule({
    imports: [
      RouterModule.forRoot([
      { path: '', redirectTo: '/index', pathMatch: 'full' },
      { path: 'about', component: AboutComponent },
      { path: 'connect', component: ConnectComponent },
      { path: 'index', component: LayoutComponent }
      ]),
      BrowserModule,
      FormsModule,
      HttpModule
    ],
    declarations: [
      AppComponent,
      AboutComponent,
      ConnectComponent,
      LayoutComponent,
      HeaderComponent,
      BreadcrumbComponent,
      FooterComponent,
      IndexComponent
    ],
    providers: [ ConnectionService, AuthService ],
    bootstrap: [ AppComponent ]
  })
  export class AppModule { }
  </code></pre>
  
  <p>anchors with routerLink in about page</p>
  
  <pre><code>    &lt;div&gt;
          &lt;a class="navbar-brand" [routerLink]="['/about']"&gt;&lt;i class="fa fa-info"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;a class="navbar-brand" [routerLink]="['/connect']"&gt;&lt;i class="fa fa-plug"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;/div&gt;
  </code></pre>