Angular 6 - RouterLink navigates but not changing URL

Question

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 1

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

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