Files
ECC/pi/core/skills/angular-developer/references/loading-strategies.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.4 KiB

Route Loading Strategies

Angular supports two main strategies for loading routes and components to balance initial load time and navigation responsiveness.

Eager Loading

Components are bundled into the initial JavaScript payload and are available immediately.

{ path: 'home', component: Home }
  • Pros: Seamless transitions.
  • Cons: Increases initial bundle size.

Lazy Loading

Components or routes are loaded only when the user navigates to them. This creates separate JavaScript "chunks".

Lazy Loading Components

Use loadComponent to fetch the component on demand.

{
  path: 'admin',
  loadComponent: () => import('./admin/admin.component').then(m => m.AdminComponent)`,
}

Lazy Loading Child Routes

Use loadChildren to fetch a set of routes.

{
  path: 'settings',
  loadChildren: () => import('./settings/settings.routes'),
}

Injection Context and Lazy Loading

Loader functions run within the injection context of the current route. This allows you to call inject() to make context-aware loading decisions.

{
  path: 'dashboard',
  loadComponent: () => {
    const flags = inject(FeatureFlags);
    return flags.isPremium
      ? import('./premium-dashboard')
      : import('./basic-dashboard');
  },
}

Recommendation

  • Use Eager Loading for the primary landing pages.
  • Use Lazy Loading for all other feature areas to keep the initial bundle small.