Angular-Routing und URL-Zustand

Angular Router & URL State

Keep navigation, route parameters, query filters and lazy-loaded feature boundaries synchronized with the browser URL so deep links, reloads and Back/Forward navigation work reliably.

1. Route configuration and lazy loading

• Organize routes along feature boundaries using loadComponent and loadChildren so heavy feature bundles load on demand.
• Place feature-scoped services and stores in the route's providers: [...] array when their lifetime should match that route subtree.
• Check whether withComponentInputBinding() is enabled in provideRouter(...): when enabled, route params, path data and query params bind directly to component @Input() / input() properties; otherwise, read them reactively from ActivatedRoute.

2. Reacting to same-component route and query parameter changes

• Angular reuses the same component instance when only route params (:id) or query params (?page=2&q=foo) change on the same route configuration.
• Never read route.snapshot.paramMap or route.snapshot.queryParamMap only once in ngOnInit when the user can navigate between items or filter states on the same route; subscribe to route.paramMap / route.queryParamMap (with switchMap to cancel stale loads) or use withComponentInputBinding() signal inputs.
• Update URL filter/pagination/tab state with router.navigate([], { relativeTo: route, queryParams, queryParamsHandling: 'merge' }) so refresh and link sharing preserve the user's view.

3. Guards, resolvers and scroll/focus restoration

• Prefer functional guards (CanActivateFn, CanDeactivateFn, CanMatchFn) returning a boolean | UrlTree (or Observable/Promise thereof) in modern Angular, matching the project's existing guard style.
• Use CanDeactivateFn to protect unsaved form drafts from accidental navigation.
• Treat client-side guards strictly as UX navigation flow: real authorization must always be enforced on the server.

Before you finish

• Same-component parameter and query changes reload data reactively via paramMap/queryParamMap or route input bindings.
• Direct URL entry, browser Back/Forward and page reload preserve expected state.
• Guards return UrlTree redirects cleanly and are never treated as a substitute for server authorization.