Orqestria Download
← Back to the catalog

Skill · Version 1.0.0

Angular routing and URL state

Keeps Angular navigation, record identifiers and filters synchronized with reloadable, shareable browser URLs.

angular-router

See how it helps

When is it useful?

Use when Back navigation, deep links or changing a record identifier leave the screen showing stale data.

What does it help you do?

  • Responds reactively to parameter changes even when Angular reuses the component.
  • Stores filter, pagination and tab state in suitable query parameters.
  • Handles lazy routes and unsaved drafts while retaining server-side authorization.

Try asking this

Fix our customer list so shared filtered links, Back and Forward, and switching customer IDs all show the correct data. Open a filtered link in a new tab and switch between two customers. The URL, active filter and displayed record must remain consistent.

Detailed documentation

Read the skill’s original instructions, examples and checks in their authored language.

Details…Show less

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.

Included files 2

  • LICENSE.txt
  • SKILL.md

About this skill package

angular-router

angular-router: Build maintainable Angular features with clear component boundaries, reactive state, forms and tested migrations.

Details…Show less

angular-router

angular-router: Build maintainable Angular features with clear component boundaries, reactive state, forms and tested migrations.

Includes the complete skill and its supporting files (2 files). The exact authored scope is preserved below.

Original skill description (source language)

Use when configuring or debugging Angular Router routes, lazy loading (loadComponent, loadChildren), functional route guards and resolvers, route and query parameters, withComponentInputBinding, or URL-driven state.

Install the skill, review its source and trust settings, then enable it for the relevant project or agent.

Requirements

  • Orqestria installed on your computer.