--- name: angular-architecture-angular-enterprise-training-blueprint description: "Designs version-aware Angular training paths for enterprise teams using a continuous business case study, architecture checkpoints, testing discipline, and practical validation outputs." license: MIT metadata: ngautopilot-id: "angular.architecture.angular-enterprise-training-blueprint" ngautopilot-source: "skills/angular/architecture/angular-enterprise-training-blueprint/SKILL.md" ngautopilot-version: "0.6.0" --- # Angular Enterprise Training Blueprint ## Purpose Use this skill to design, evaluate, or improve an Angular training path focused on real enterprise application development. This skill turns an Angular learning agenda into a practical architecture enablement plan. It is not a generic tutorial. It helps agents define what a developer or team must understand before contributing safely to a modern Angular codebase. The training must be grounded in a continuous business case study, sustainable development practices, version-aware Angular features, testing discipline, and architectural decision-making. ## When to Use Use this skill when the user asks to: - create an Angular training roadmap - design an Angular onboarding plan for a team - evaluate whether an Angular developer has enough baseline knowledge - convert a course agenda into repo skills - prepare Angular training for enterprise projects - define minimum Angular knowledge for frontend squads - create a case-study-driven Angular learning path - build Angular architecture workshops - review Angular concepts by version and risk - align junior, mid, and senior Angular expectations ## When Not to Use Do not use this skill when the task is only: - fixing a specific Angular bug - creating one isolated component - writing a unit test for an existing file - migrating between Angular versions - refactoring performance issues - choosing between Signals and RxJS for one small case - explaining TypeScript basics without Angular context Route those tasks to more specific skills when available, such as: - `angular/components/container-presentational` - `angular/dependency-injection` - `angular/rxjs/observable-contracts` - `angular/state/signals-vs-rxjs` - `angular/testing/*` - `angular/performance/performance-orchestrator` - `angular/versioning/angular-version-gates` - `angular/upgrades/*` ## Do Design the training around a continuous case study: ```txt task management system insurance policy management claims management product catalog appointment booking support ticket system customer portal back-office administration order management document workflow ``` Require the case study to include: ```txt routing list/detail screens forms HTTP services validation loading/error states reusable UI components state handling authorization scenarios testing performance review refactoring checkpoints ``` Structure the plan as a capability matrix: | Area | Expected capability | Minimum output | | -------------------- | --------------------------------------------------- | ------------------------------------------------------- | | TypeScript | Understand Angular-oriented TypeScript patterns | Typed models, discriminated unions, safe null handling | | Angular CLI | Create and inspect Angular projects | Project generated and structure explained | | Components | Build maintainable UI blocks | Smart/presentational split where needed | | Templates | Use binding safely | No heavy logic in templates | | Services | Extract reusable business/application logic | Services with clear responsibility | | Dependency Injection | Understand providers, tokens, scopes and hierarchy | Provider decisions justified | | HTTP | Fetch data with error handling | Typed API service | | RxJS | Model async flows correctly | No nested subscriptions | | Signals | Use `signal`, `computed` and `effect` appropriately | Local reactive state without overengineering | | RxJS interop | Bridge Observable and Signal worlds safely | Clear boundary between streams and signals | | Forms | Build template-driven and reactive forms | Validators and error handling | | Typed forms | Use typed reactive forms where version allows | Strongly typed form model | | Routing | Configure navigation and params | Lazy loaded route | | Testing | Test class, template and service behavior | Unit tests with mocks/spies | | E2E | Validate critical user flows | Cypress or Playwright scenario | | Performance | Detect avoidable rendering and bundle issues | Lazy loading, trackBy/@for track, OnPush/signals review | | Security | Avoid unsafe binding and weak auth assumptions | Security risk checklist | | Architecture | Explain trade-offs | ADR or architecture note | Make the plan version-aware: ```txt Angular 14+ -> typed reactive forms Angular 16+ -> Signals, DestroyRef, takeUntilDestroyed Angular 17+ -> @if, @for, @switch, @defer Angular 19+ -> standalone-first defaults Angular 20+ -> resource/rxResource awareness Angular 21+ -> stricter host binding and SSR security review ``` Use a blended delivery model: ```txt Concept -> example -> live coding -> exercise -> review -> refactor -> test -> architecture note ``` Keep the case study progression practical: ```txt Module 1: create app and first feature Module 2: services, DI, HTTP, loading/error states Module 3: components, forms, validation, routing Module 4: reactive state, Signals, RxJS, testing Module 5: architecture review, performance, security, refactor ``` ## Do Not Avoid teaching Angular as isolated syntax. Avoid skipping TypeScript fundamentals. Avoid introducing advanced state management before the team understands core Angular. Avoid replacing RxJS blindly with Signals. Avoid skipping DI scopes, forms, tests, or routing. Avoid producing a training plan that lacks artifacts or validation. ## Review Checklist - [ ] Target Angular version is explicit. - [ ] Team level and training goal are explicit. - [ ] The plan uses a continuous business case study. - [ ] Each module has a practical output and validation checkpoint. - [ ] The plan is version-aware. - [ ] Core Angular concepts are taught in workflow context. - [ ] Testing and architecture review are included. - [ ] The next skills to invoke are identified. ## Expected Output When this skill is used, the agent should: 1. Identify the target audience, Angular version, and training goal. 2. Build a capability matrix for the team. 3. Design a continuous enterprise case study. 4. Produce a version-aware module plan with exercises and validation. 5. Call out risks, anti-patterns, and follow-up skills.