[Angular 19]Routing not working with a tag

I'm developping a simple app to practice with Angular and I'm hitting a wall regarding routing.

I'm not using standalone component.

I have a app.routing.module as follow :

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MonthDetailComponent } from './containers/month-detail/month-detail.component';
import { BudgetEntryComponent } from './components/budget-entry/budget-entry.component';

const routes: Routes = [
{
path: 'month/:id',
component: MonthDetailComponent
},
{
path: 'entry/:id',
component: BudgetEntryComponent
},
{
path: '',
pathMatch: 'full',
redirectTo: 'month/1'
}
];

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


That I'm using in my app.module :

import { AppComponent } from './app.component';
import { MonthListComponent } from './containers/month-list/month-list.component';
import { MonthDetailComponent } from './containers/month-detail/month-detail.component';
import { BudgetEntryComponent } from './components/budget-entry/budget-entry.component';
import { MatTableModule } from '@angular/material/table';

@NgModule({
declarations: [
AppComponent,
MonthListComponent,
MonthDetailComponent,
BudgetEntryComponent
],
imports: [
BrowserModule,
AppRoutingModule,
MatTableModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }


I declared the router-outlet in the app.component.html :

<budget-month-list class="menu"></budget-month-list>

<router-outlet class="content"></router-outlet>


And here is how the router-link is used :

<div>
<ul>
<ng-container *ngIf="months?.length; then items; else nothing"></ng-container>
<ng-template #items>
<li *ngFor="let entry of months">
<a
[routerLink]="['/month', entry.id]">{{entry.name}}</a>
</li>
</ng-template>
<ng-template #nothing>
<p>No month...</p>
</ng-template>
</ul>
</div>


When the app starts, I arrived on the correct default value (month/1).But when I click on one of the a tag, I do see the url change but nothing happens. If I go manually in the url and press enter, then the routing is fired and my page loads.

For example, the app starts and I'm at /month/1 and see the informations regarding id 1. I click on the a tag for the id 3. I see the url turned to /month/3 but nothing is loaded. If I go in the url bar and hit enter, then I'll see the informations for /month/3.

I have googled and try multiple thing on my end, but nothing works. Any idea what I may be missing ?

Continue reading...