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.
if you are running hybrid app(with upgrade module) add useHash to router config
imports: [RouterModule.forRoot(routes, { useHash: true, enableTracing: true })],