Angular-Codebasis erkunden

Angular Codebase & Version Discovery

Verify the project's actual Angular, TypeScript, RxJS, router, state and build versions and conventions from its manifests and source before proposing or writing code.

1. Versions, manifests and workspace configuration

• Read package.json, the lockfile (package-lock.json, pnpm-lock.yaml, yarn.lock, bun.lock*), angular.json / project.json (Nx) and tsconfig*.json before assuming any Angular or RxJS API exists:
  • Angular version & authoring style: check @angular/core version and whether the app uses standalone components (standalone: true or implicit standalone in Angular 19+), NgModules, or a hybrid setup; check whether signal inputs (input(), output(), model()), @if / @for / @switch control flow (Angular 17+), linkedSignal / resource (Angular 19+), or traditional @Input() / *ngIf are standard in the repo.
  • RxJS & state: check rxjs version (v6 vs v7+), @ngrx/store, @ngrx/signals, @ngrx/component-store, @tanstack/angular-query-experimental, or service-based state.
  • Build, test & SSR: inspect angular.json builder (@angular-devkit/build-angular:application, browser-esbuild, browser, SSR / @angular/ssr), test runner (Karma/Jasmine, Jest, Vitest, Playwright/Cypress), and linter (angular-eslint).
• When version-specific behavior is uncertain, inspect the installed package declarations in node_modules/@angular/* or the official documentation for that version.

2. Existing architecture, components, services and tokens

• Map the feature boundaries (core/, shared/, features/ or Nx libs) and inspect 2–3 sibling components and services in the area you will touch:
  • Component conventions: ChangeDetectionStrategy.OnPush, inline vs external templates/styles, inject() vs constructor injection, host bindings (host: {...}), and selector prefixes.
  • Reuse existing shared components, directives, pipes, HTTP services, interceptors, validators and design tokens before creating new ones.
• Never start an unsolicited standalone, Signals, control-flow or state-manager migration outside the task's scope.

3. State ownership and data lifecycle map

• Classify every piece of data in the user flow with one clear owner and lifetime:
  • Server data: HTTP responses cached or refreshed at the feature/route boundary.
  • URL state: route params, query params and fragments owned by @angular/router.
  • Component / UI state: transient open/closed flags, form drafts and local interaction state scoped to the component or a component-level service.
  • Shared application state: cross-route session or domain state in a root/feature service or store.
  • Derived state: computed via computed() or pure RxJS map/combineLatest, never duplicated and manually synced.

Before you finish

• package.json, lockfile, angular.json and tsconfig checked; exact Angular, TypeScript and RxJS versions known.
• Standalone vs NgModule, template control flow, DI and change-detection conventions matched.
• Existing components, services, pipes, validators and design tokens reused.
• Server data, URL state, local UI state, shared state and derived values assigned a single owner and lifetime.