Files
ECC/pi/core/skills/angular-developer/references/define-routes.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.7 KiB

Define Routes

Routes are objects that define which component should render for a specific URL path.

Basic Configuration

Define routes in a Routes array and provide them using provideRouter in your appConfig.

// app.routes.ts
export const routes: Routes = [
  {path: '', component: HomePage},
  {path: 'admin', component: AdminPage},
];

// app.config.ts
export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes)],
};

URL Paths

  • Static: Matches an exact string (e.g., 'admin').
  • Route Parameters: Dynamic segments prefixed with a colon (e.g., 'user/:id').
  • Wildcard: Matches any URL using **. Useful for "Not Found" pages. Always place at the end of the array.

Matching Strategy

Angular uses a first-match wins strategy. Specific routes must come before less specific ones.

Redirects

Use redirectTo to point one path to another.

{ path: 'articles', redirectTo: '/blog' },
{ path: 'blog', component: Blog },

Page Titles

Associate titles with routes for accessibility. Titles can be static or dynamic (via ResolveFn or a custom TitleStrategy).

{ path: 'home', component: Home, title: 'Home Page' }

Route Data and Providers

  • Static Data: Attach metadata using the data property.
  • Route Providers: Scope dependencies to a specific route and its children using the providers array.

Nested (Child) Routes

Define sub-views using the children property. Parent components must include a <router-outlet />.

{
  path: 'product/:id',
  component: Product,
  children: [
    { path: 'info', component: ProductInfo },
    { path: 'reviews', component: ProductReviews },
  ],
}