Angular 18 Routing/URL

I am currently exploring angular 18 and noticed that sometimes when the app is routed to a component and not on the homepage;

1. 
   If I refresh, it takes me back to the home page instead of reloading the current route. For example I am on this route "example.com/account/settings" and refresh, it takes me back to "example.com" and gives me a blank screen.
   
   
2. 
   When on a route and I click on another route, it reloads the current route instead of loading the new route. For example, I am on this route "example.com/account/settings" and click on another route "example.com/pricing". It reloads the current route "example.com/account/settings" and gives me a blank screen.
   

It may be that there are breaking changes I am not aware of and I haven't seen anything online related to the issue I am having.

Any idea on what the issue might be?

NB: Some of my routes are lazy loaded and this same approach works fine on Angular 16 and below.

My component HTML

<a href="javascript:;" routerLink="pricing"><i class='bx bx-radio-circle'></i>


app component HTML

<router-outlet />


My Routing Module

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PRICING_COMPONENT } from './pricing/pricing.component';
import { DASHBOARD_COMPONENT } from './dashboard/dashboard.component';

const routes: Routes = [
{path: '', component: DASHBOARD_COMPONENT }
{path: 'pricing', component: PRICING_COMPONENT }
];

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

Continue reading...