An Angular /users/:id profile loads its user in ngOnInit from route.snapshot; Next and Previous links change the URL but the page never updates. Why, and how do you fix it robustly?

## Reproducing the bug ```ts export class UserProfile implements OnInit { private readonly route = inject(ActivatedRoute); private readonly api = inject(UserApi); user?: User; ngOnInit() { const id = this.route.snapshot.paramMap.get('id')!; this.api.getUser(id).subscribe((u) => (this.user = u)); } } ``` The template has Previous and Next links to `/users/1` and `/users/3`. The first visit works. Clicking Next changes the address bar to `/users/3`, and nothing on screen changes. ## Diagnosis 1. **Reuse.** When the router processes `/users/3`, it asks the `RouteReuseStrategy` whether to keep the current route. The default `shouldReuseRoute()` returns `true` when both snapshots share the same route config object, and `users/:id` is one config. The component instance and its `ActivatedRoute` are kept. 2. **One-shot code.** `ngOnInit` runs once per instance, so the load inside it ran for user 2 and never again. 3. **The route did update.** The router replaced `route.snapshot` and emitted a new `ParamMap` on `route.paramMap`, but nothing in the component was listening. A quick confirmation: log in the constructor and in a `paramMap` subscription, then click Next. The constructor logs once; the subscription logs twice. ## A robust fix with the Observable Derive the load from the id stream so every new id triggers a new load: ```ts readonly user = toSignal( this.route.paramMap.pipe( map((p) => p.get('id')!), switchMap((id) => this.api.getUser(id)), ), ); ``` Three properties matter: - it runs for the first id and for every later one, reuse or not; - `switchMap` unsubscribes from the previous request when a new id arrives, so three quick clicks on Next cannot end with an older response overwriting the newest user; - `toSignal()` subscribes in an injection context and cleans up with the component. ## A signal-first fix with input binding With `provideRouter(routes, withComponentInputBinding())`, declare `id = input.required<string>()`. The router sets it on every navigation, including reused ones. Feed it into a resource keyed on the id, or into a `computed()` for synchronous derivations, and the page follows the URL without touching `ActivatedRoute`. ## State that reuse also keeps The instance survives, so **everything** on it survives: - a half-typed note for user 2 appears on user 3's page; - the selected tab, scroll position of an inner panel, or "expanded" flags carry over; - child components keep their own state too. Reset such state when the id changes: derive it from the id with `linkedSignal()`, or reset it in the same pipeline that loads the user. ## Fixes that are not fixes | Attempt | Why it fails or costs too much | |---|---| | Move the snapshot read to the constructor | still runs once per instance | | `onSameUrlNavigation: 'reload'` | governs navigation to the **same** URL; `/users/3` is different, and reuse is decided elsewhere | | A custom `RouteReuseStrategy` that never reuses | destroys and rebuilds the whole page per click, losing intended state and costing render time | | `window.location.reload()` | throws away the SPA state and reloads the app | ## Testing the fix A regression test should reproduce the reuse, not just the first load. With the router's testing harness you navigate to `/users/2`, then to `/users/3` **without** recreating the component, and assert that the second user is displayed and the first request's late response is ignored. A test that only mounts the component once with a fixed id passes for the broken version too, which is how this bug usually ships. ## What a strong answer adds A senior answer names reuse as the root cause, fixes the data flow rather than the lifecycle, handles out-of-order responses, and remembers the per-instance state. It also notes that the same bug appears whenever a page can link to another instance of itself: related users, search results that navigate the same route, or a Next link added long after the page was written.