Router Internals — Series 3

Preview — 3 of 10 questions

What does overriding UrlSerializer actually control?

javascript

@Injectable()
export class LowercaseUrlSerializer extends DefaultUrlSerializer {
  override parse(url: string): UrlTree {
    return super.parse(url.toLowerCase());
  }
}

AUrlSerializer is the piece responsible for converting between a raw URL string and a structured UrlTree (via parse()), and back again (via serialize()). Overriding it — as shown, forcing every incoming URL to lowercase before the default parsing logic runs — changes how every URL the router encounters is interpreted, before route matching even begins, which is a much lower-level hook than a per-route UrlMatcher

BIt only affects how URLs are displayed in the browser's address bar, not how they're matched against routes

CUrlSerializer can only be overridden for routes explicitly opting in via a serializer property

DThis has no effect; UrlSerializer is a read-only, non-injectable internal class

What is this Scroll event for, and when would code actually subscribe to it directly like this?

javascript

this.router.events.pipe(
  filter((e): e is Scroll => e instanceof Scroll),
).subscribe(e => console.log(e.position, e.anchor));

AScroll fires as part of the router's scroll-restoration machinery, carrying the target .position (a stored [x, y] coordinate for back/forward navigation) or .anchor (a fragment identifier) that the router would use to restore scroll automatically. Subscribing to it directly is the escape hatch for implementing genuinely custom scroll behavior — typically after disabling the built-in scrollPositionRestoration, so custom code decides exactly how and when to actually scroll, using the same information the built-in mechanism would have used

BIt only exists for internal use; subscribing to it directly is unsupported and has no guaranteed behavior

CScroll only fires for anchor-fragment navigation, never for back/forward position restoration

DScroll is emitted continuously while the user scrolls the page, for building custom scroll-spy navigation

What is the actual difference between these two, beyond one being reachable from the other?

javascript

const liveState = this.router.routerState;       // RouterState
const snapshot = liveState.snapshot;               // RouterStateSnapshot

AThey're functionally identical; snapshot is just a convenience alias with no structural difference

BRouterStateSnapshot is deprecated in favor of always using the live RouterState directly

CRouterState is the live, ongoing tree of ActivatedRoute objects — its params, data, and other pieces are exposed as Observables that continue emitting as the user navigates further, without the tree itself being torn down and rebuilt for every navigation. RouterStateSnapshot (and its component nodes, ActivatedRouteSnapshot) is an immutable capture of that same tree's shape and values at one specific instant — what a guard or resolver receives as its state/route arguments, representing "the state as of this particular navigation," not something that changes underneath the code holding it

DRouterState only exists during SSR; client-side apps only ever have RouterStateSnapshot

Answer all 10 questions (7 more), see explanations for every answer, and track your score.