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 },
  {
    path: 'account',
    // canActivate: [AuthGuard, SessionGuard, VerificationGuard],
    loadChildren: () => import('./lazy-loaded-account/lazy-loaded-account.module').then(
      module => module.LAZY_LOADED_ACCOUNT_MODULE
    )
  }
];

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

My Lazy Loaded Routing file

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PROFILE_COMPONENT } from './profile/profile.component';
import { SETTINGS_COMPONENT } from './settings/settings.component';

const routes: Routes = [
  {path: 'profile', component: PROFILE_COMPONENT},
  {path: 'settings', component: SETTINGS_COMPONENT},
];

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

Thank you all, The issue emanated from putting href and routerLink together as highlighted below.

<a href="javascript:;" routerLink="pricing">

I changed to the below and the issue was resolved.

<a routerLink="pricing">

@JSON Derulo was right

Reference https://angular.dev/guide/routing/router-reference#router-links