Angular 4 Routing mit unendlich/#/in url

Question

Seit einigen Tagen habe ich dieses Problem mit Angular CLI und Routing. Wenn Sie auf die genaue URL zeigen, scheint es gut zu funktionieren. Wenn Sie versuchen, mit routerLink umzuleiten, schreibt es in die URL unendliche/# Seite. Wenn Sie auf Index sind und versuchen, um zu gehen zu Seite schreibt http://baseurl/index#/about#/index#/index#/index#/index#/index#/index#/index#/ ... und gehen weiter, bis Finish des RAM: D

Dieses Problem ist nur in devmode mit „ng dienen“ (wohl aber mit hashlocationstrategy). Im Produktionsmodus scheint die Arbeit in Ordnung zu sein.

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

Anker mit Router in etwa Seite

<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

Ändern Sie Ihren Router-Modul

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