Files
ECC/pi/core/skills/angular-developer/references/router-lifecycle.md
T
Affaan MustafaandGitHub c70874fae9 feat(pi): curated pi/core skills+prompts profile, CI load test, and 2.2.2 release sync (#3264)
Adds a curated, Pi-native, skills+prompts-only profile at pi/core/ for downstream packagers that mirror GitHub Releases.

- manifests/pi-core.json: explicit include lists, per-item exclusion reasons, curation rules, safety allowlists; every root skill and command must be classified.
- scripts/build-pi-core.js regenerates pi/core deterministically (package.json from VERSION, LICENSE, README.md, CURATION.md, skills/, commands/); --check fails CI on drift. council is renamed ecc-council inside pi/core only.
- Safety checks: no callable endpoints outside the allowlist, no npx/curl|sh/pip install, no secrets, no absolute home paths, no symlinks, valid frontmatter, no duplicate names.
- CI: build + drift check and an offline Pi CLI load test of pi/core.
- Release: VERSION, package.json and pi/core/package.json at 2.2.2, CHANGELOG, tag-triggered release verification, and a two-week cadence in CONTRIBUTING.md.

pi/core: 123 of 293 skills and 24 of 94 commands; 35,006 characters of skill description text.
2026-09-29 20:24:05 -05:00

1.5 KiB

Router Lifecycle and Events

Angular Router emits events through the Router.events observable, allowing you to track the navigation lifecycle from start to finish.

Common Router Events (Chronological)

  1. NavigationStart: Navigation begins.
  2. RoutesRecognized: Router matches the URL to a route.
  3. GuardsCheckStart / End: Evaluation of canActivate, canMatch, etc.
  4. ResolveStart / End: Data resolution phase (fetching data via resolvers).
  5. NavigationEnd: Navigation completed successfully.
  6. NavigationCancel: Navigation canceled (e.g., guard returned false).
  7. NavigationError: Navigation failed (e.g., error in resolver).

Subscribing to Events

Inject the Router and filter the events observable.

import {Router, NavigationStart, NavigationEnd} from '@angular/router';

export class MyService {
  private router = inject(Router);

  constructor() {
    this.router.events.pipe(filter((e) => e instanceof NavigationEnd)).subscribe((event) => {
      console.log('Navigated to:', event.url);
    });
  }
}

Debugging

Enable detailed console logging of all routing events during application bootstrap.

provideRouter(routes, withDebugTracing());

Common Use Cases

  • Loading Indicators: Show a spinner when NavigationStart fires and hide it on NavigationEnd/Cancel/Error.
  • Analytics: Track page views by listening for NavigationEnd.
  • Scroll Management: Respond to Scroll events for custom scroll behavior.