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. Continue reading...
