Files
ECC/pi/core/skills/angular-developer/references/data-resolvers.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

Data Resolvers

Data resolvers fetch data before a route activates, ensuring components have the necessary data upon rendering.

Creating a Resolver

Implement the ResolveFn type.

export const userResolver: ResolveFn<User> = (route, state) => {
  const userService = inject(UserService);
  const id = route.paramMap.get('id')!;
  return userService.getUser(id);
};

Configuring the Route

Add the resolver under the resolve key.

{
  path: 'user/:id',
  component: UserProfile,
  resolve: {
    user: userResolver
  }
}

Accessing Resolved Data

1. Via ActivatedRoute (Traditional)

private route = inject(ActivatedRoute);
data = toSignal(this.route.data);
user = computed(() => this.data().user);

2. Via Component Inputs (Modern)

Enable withComponentInputBinding() in provideRouter to pass resolved data directly to @Input or input().

// app.config.ts
provideRouter(routes, withComponentInputBinding());

// component.ts
user = input.required<User>();

Error Handling

Navigation is blocked if a resolver fails.

  • Use withNavigationErrorHandler for global handling.
  • Use catchError within the resolver to return a RedirectCommand or fallback data.
return userService
  .get(id)
  .pipe(catchError(() => of(new RedirectCommand(router.parseUrl('/error')))));

Best Practices

  • Keep it lightweight: Fetch only critical data.
  • Provide feedback: Listen to router events to show a global loading bar during navigation, as the UI stays on the old page until the resolver finishes.