Angular 4路由带有无限/＃/ url

Question

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 http://baseurl/index#/about#/index#/index#/index#/index#/index#/index#/index#/ ... and goes on until finish the RAM :D

This problem is only in devmode with "ng serve" (but works with hashlocationstrategy). In production mode seems work fine.

Here some codes.

in index.html

<base href="/">

app.module

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 { }

anchors with routerLink in about page

    <div>
        <a class="navbar-brand" [routerLink]="['/about']"><i class="fa fa-info"></i></a>
        <a class="navbar-brand" [routerLink]="['/connect']"><i class="fa fa-plug"></i></a>
    </div>

Answer 1

In the @NgMoudle in your routing module add the {useHash:true} option. This will stop the problem, but I don't fully understand why. That option is designed for compatibility with older browsers, but I am using latest Chrome. I have written other angular projects using same browser on same PC that don't have this problem, and my code with the problem seems identical. I write this not as a solution, but given no-one has answered this question, I hope my answer may serve as a 'clue' for someone better than me to explain what it happening and why

@NgModule({
imports:[RouterModule.forRoot(appRoutes, {useHash: true})], 
exports:[RouterModule]
})

Answer 2

Change your router module to

{ path: 'about', component: AboutComponent },
{ path: 'connect', component: ConnectComponent },
{ path: 'index', component: LayoutComponent },
{ path: '', redirectTo: 'index', pathMatch: 'full'},
{path:'**',redirectTo:'index',pathMatch:'full'}