Angular Architecture Angular Enterprise Training Blueprint

---
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.10.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

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.