Angular 6 - RouterLink navigates but not changing URL

balachander j picture balachander j · Jun 1, 2018 · Viewed 9.3k times · Source

app.component.html

<nav>
 <a routerLink="/dashboard"></a>
 <a routerLink="/reports"></a>
<nav>
<main role="main" class="page-container">
  <router-outlet></router-outlet>
</main>

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ReportsComponent } from './reports/reports.component';

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent },
  { path: 'reports', component: ReportsComponent },
  { path: '',
    redirectTo: '/dashboard',
    pathMatch: 'full'
  }];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ReportsComponent } from './reports/reports.component';


@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent,
    ReportsComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {

}

With the above code, I see that on click of the nav links, am able to navigate to the corresponding component but for some reason, URL is not getting updated.

Not sure if am missing something pretty basic here. Please help.

Answer

Serhii Andronik picture Serhii Andronik · Jun 7, 2018

if you are running hybrid app(with upgrade module) add useHash to router config

imports: [RouterModule.forRoot(routes, { useHash: true, enableTracing: true })],