Somehow, the live reload (when any code is changed) causes routing issues. I've spent couple of hours investigating this, however couldn't understand what is going on. Here is what happens:

When I navigate through the app -> routing works perfect. There is no issue at all

When I paste a Url with segements or the root one into the browser - it works as epxected, all is good.

When I change any code, the live reload feature does something weird, it inserts the correct content into the outlet (according to the current Url), however the Url path shows root / (or it is taken to the root).

Each time after the live reload, when I click any link in the app - it throws the following error:

Cannot activate an already activated outlet

After spending several hours trying to understand this weird behavior I couldn't move on at all.

Angular version is 18

There is MSAL for Angular library used that handles the login and authentication, though I don't think it has something to do with this issue, because like I've mentioned above, when I paste any Url with segments into the browser - it takes me to the correct destination without any issue and the app works fine. The problem only occurs during the live reload.

There is a default route defined for the root path, so that the app-routing.module.ts has these lines:

const routes: Routes = [
....
{
    path: '',
    redirectTo: '/my/destination',
    pathMatch: 'full'
  },
  {
    path: '**',
    redirectTo: '/my/destination',
    pathMatch: 'full'
  }
];

I'm using modules for the inner parts of the application, so that the different parts of the application are loaded like this:

{
    path: 'some',
    loadChildren: () => import('./seg/subseg/dest-page.module').then(m => m.DestModule)
  },

Each time when I change the code and a live-reload is performed I have to manually push the F5 button to reload the app, which is ridiculous and annoying.