(only) URL doesn't update after navigation

I have recently updated my angular app from 18.x.x to 19.2.14. I updated the angular version, so i could test my spec files. The routing was working perfectly in the older version but i encountered a rather obscure behaviour.

The Problem:

• Angular internally sets the correct component when navigating
• the URL-Bar doesnt update at all Because of this:
• Auth-Guards don't work as expected
• components are missing crucial data

Using logs i found, that the redirect/navigation is completed and Angular itself sees nothinh wrong.

below my setup

//package.json
{
"name": "alarmClient",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"start-all-hosts": "ng serve --host 0.0.0.0",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"lint": "ng lint"
},
"private": true,
"dependencies": {
"@angular/animations": "^19.2.14",
"@angular/common": "^19.2.14",
"@angular/compiler": "^19.2.14",
"@angular/core": "^19.2.14",
"@angular/forms": "^19.2.14",
"@angular/material": "^19.2.14",
"@angular/platform-browser": "^19.2.14",
"@angular/platform-browser-dynamic": "^19.2.14",
"@angular/router": "^19.2.14",
"angular-material-icons": "^0.7.1",
"jwt-decode": "^4.0.0",
"material-icons": "^1.13.12",
"rimraf": "^6.0.1",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"typescript-cookie": "^1.0.6",
"uuid": "^11.0.5",
"zone.js": "~0.15.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "^19.2.15",
"@angular/cli": "^19.2.15",
"@angular/compiler-cli": "^19.2.14",
"@types/jasmine": "~5.1.0",
"@types/jsonwebtoken": "^9.0.10",
"angular-eslint": "19.0.0",
"eslint": "^9.15.0",
"eslint-config-prettier": "^10.0.1",
"eslint-plugin-prettier": "^5.2.3",
"jasmine-core": "~5.2.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.5.2",
"typescript-eslint": "8.16.0"
}
}


//app.routing.module.ts

import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { VideoDisplayContainerComponent } from "../components/video-display-container/video-display-container.component";
import { LoginComponent } from "../components/login/login.component";
import { AuthGuardService } from "../services/auth-guard.service";
import { MapsComponent } from "src/components/maps/maps.component";
import {IsLoggedInGuardService} from '../services/is-logged-in-guard.service';

export const routes: Routes = [
{
path: "",
component: VideoDisplayContainerComponent,
canActivate: [AuthGuardService],
},
{ path: "cams", component: VideoDisplayContainerComponent, canActivate: [AuthGuardService] },
{ path: "maps", component: MapsComponent, canActivate: [AuthGuardService] },
{ path: "login", component: LoginComponent, canActivate: [IsLoggedInGuardService] },
];

@NgModule({
imports: [RouterModule.forRoot(routes)], // Use RouterModule.forRoot for the root module
exports: [RouterModule],
})
export class AppRoutingModule {}


//app.module.ts

@NgModule({
declarations: [
...
],
imports: [
BrowserModule,
RouterModule.forRoot(routes),
BrowserAnimationsModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
AppRoutingModule,
RouterOutlet,
MatIconModule,
MatButtonModule,
MatDividerModule,
MatFormFieldModule,
MatSelectModule,
MatDialogModule,
MatInputModule,
MatMenuModule,
MatTooltipModule,

AngularAssetModule,
SharedModule,
NgOptimizedImage,

// Testing Modules
BrowserDynamicTestingModule,
NoopAnimationsModule,
],
providers: [
HttpClient,
RestService,
AuthService,
provideRouter(routes, withComponentInputBinding()),
// {provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true},
{provide: APP_BASE_HREF, useValue: '/'},
{provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true},
DialogService,
AssetsService,
InterfacesService,
{ provide: LOCALE_ID, useValue: "en-GB" },
provideAnimationsAsync(), // Optionally set the default locale for the app
],
bootstrap: [AppComponent],
})
export class AppModule {}


I already tried many different imports or configurations for module.ts and angular.json, yet without any success

Continue reading...