Essential session storage is required to sign in. Optional analytics remain off unless you allow them.
Build a multi-route Angular app: the Router (provideRouter) with a list route, a dynamic /:id detail route (read via ActivatedRoute), and a LAZY-LOADED feature (loadComponent/loadChildren) protected by a FUNCTIONAL guard (CanActivateFn) based on a simple auth flag. Fetch data from a public API with HttpClient (provideHttpClient) — consumed via the async pipe (no manual subscribe leaks) — and build a REACTIVE form (FormGroup/FormControl/FormBuilder + Validators) for create/edit with validation feedback.
Correct Router setup with a dynamic param route, a lazy-loaded route, and a functional CanActivateFn guard (not class-based).
provideHttpClient + typed requests returning Observables; the async pipe used (or explicit unsubscribe) — no leaks.
A reactive FormGroup with validators and surfaced validity/errors; not a template-driven ngModel form.
Navigates without reloads; loading/error states handled; modern Angular throughout.
Use this README structure to make the work reviewable.
DevPath fetches a read-only, size-capped snapshot. Submitted code is never executed.
# A routed app with HttpClient & reactive forms ## Goal Build a multi-route Angular app: the Router (provideRouter) with a list route, a dynamic /:id detail route (read via ActivatedRoute), and a LAZY-LOADED feature (loadComponent/loadChildren) protected by a FUNCTIONAL guard (CanActivateFn) based on a simple auth flag. Fetch data from a public API with HttpClient (provideHttpClient) — consumed via the async pipe (no manual subscribe leaks) — and build a REACTIVE form (FormGroup/FormControl/FormBuilder + Validators) for create/edit with validation feedback. ## Acceptance criteria - [ ] Routing & guards: Correct Router setup with a dynamic param route, a lazy-loaded route, and a functional CanActivateFn guard (not class-based). - [ ] HttpClient & RxJS: provideHttpClient + typed requests returning Observables; the async pipe used (or explicit unsubscribe) — no leaks. - [ ] Reactive forms: A reactive FormGroup with validators and surfaced validity/errors; not a template-driven ngModel form. - [ ] Correctness: Navigates without reloads; loading/error states handled; modern Angular throughout. ## Verification - [ ] Document installation and run commands. - [ ] Record automated checks and their exact commands. - [ ] Add representative output, screenshots, or a short demo where useful. - [ ] Confirm failure paths and known constraints. ## Decision log ### Decision title - Context: - Choice: - Alternatives considered: - Tradeoffs: ## Evidence - Link each rubric criterion to the file, test, or artifact that demonstrates it. ## Known limitations - List what is intentionally out of scope and what should be improved next.