The Angular Dispatch From Apprentice to Senior — A Complete Curriculum Angular 17+ · TypeScript 5+ · RxJS 7+

● Complete Senior Track

From Zero
to Senior
Angular Dev

A five-stage curriculum built the way real engineers grow — through depth, deliberate practice, pattern recognition, and production-grade assignments. Every stage leaves you with something in your portfolio.

Your Progress
01 · TS Foundations 02 · Angular Core 03 · RxJS + State 04 · Architecture 05 · Senior Craft
0 / 42 tasks
── LEARNING TIMELINE OVERVIEW
Stage 01
Weeks 1–4
TypeScript types, interfaces, generics, decorators. Toolchain setup. ES modules.
Stage 02
Weeks 5–10
Components, services, DI, routing, forms, HTTP, standalone APIs.
Stage 03
Weeks 11–16
Weeks 11–16
RxJS operators, subjects, state management (NgRx / Signals).
Stage 04
Weeks 17–24
Module architecture, lazy loading, design patterns, testing, CI.
Stage 05
Weeks 25–32
Performance, SSR, micro-frontends, monorepos, senior leadership skills.
01
Foundation · Weeks 1–4

TypeScript
Mastery First

⏱ 4 weeks · ~2 hrs/day
+
Tasks & Topics
  • Primitive types, type inference, any vs unknown vs never
    TS
  • Interfaces vs Type Aliases — know every difference cold
    TS
  • Generics: <T>, constraints, conditional types, infer
    TS
  • Utility types: Partial, Required, Pick, Omit, ReturnType, Parameters
    TS
  • Decorators (class, method, property) — how Angular uses them
    TS
  • Strict mode: tsconfig.json flags and why they matter
    TS
  • ES Modules: import/export, barrel files, circular dependencies
    TS
  • Async patterns: Promises, async/await, error handling chains
    TS
Uncommon Resources
⚡ Shortcut
Do the official TypeScript playground challenges before any course. Struggle with the types first — this forces genuine understanding of type inference rather than copy-paste learning.
Interactive
TypeScript Exercises (typescript-exercises.github.io)
Forces you to solve real type puzzles. Better than any video.
Book
"Effective TypeScript" — Dan Vanderkam
52 specific items on writing better TS. The Effective C++ for TypeScript.
Challenge Site
Type Challenges (github.com/type-challenges)
Ranked puzzles (Easy→Extreme). Do 2 per day. Brutal and essential.
Docs
TypeScript Deep Dive (basarat.gitbook.io)
Free. Covers internals like declaration merging that most devs skip.
YouTube
Matt Pocock — "TypeScript Wizards" series
Advanced TS from the creator of ts-reset. No fluff.
// Conditional types — master this early type IsArray<T> = T extends any[] ? 'yes' : 'no'; type Unwrap<T> = T extends Promise<infer U> ? U : T;
Practice Assignments
Build a Type-Safe API Client
Write a generic fetchAPI<T>(url, options) function that infers response shape from a type parameter. Add error narrowing. No any allowed anywhere.
SOLO · 3 HOURS
Utility Type Library
Re-implement Partial, Required, Readonly, Pick, Omit, ReturnType from scratch without using the built-in versions.
SOLO · 4 HOURS
Typed Event Emitter
Create a fully generic EventEmitter<Events> class whecode>Events is a record mapping event names to payload types. on(), emit(), off() must all be fully typed.
SOLO · 5 HOURS
02
Core Framework · Weeks 5–10

Angular
Fundamentals

⏱ 6 weeks · ~2 hrs/day
+
Tasks & Topics
  • Standalone components — Angular 17+ default. Understand bootstrapApplication
    NG
  • Component lifecycle hooks — all 8, with real use-cases for each
    NG
  • Input/Output, @Input transforms, model() signal inputs (v17+)
    NG
  • Dependency Injection hierarchy — element, component, module, root
    NG
  • Angular Router: guards, resolvers, lazy routes, withComponentInputBinding
    NG
  • Template-driven vs Reactive Forms — know both, prefer reactive
    NG
  • HttpClient, interceptors, typed HTTP responses
    NG
  • Angular Signals: signal(), computed(), effect() — the modern reactivity model
    NG
Uncommon Resources
⚡ Shortcut
Read the Angular source code on GitHub for components you use daily. Understanding how ChangeDetectionStrategy.OnPush actually works in the framework is worth more than 10 tutorials.
Blog
Angular In Depth (indepth.dev)
Deep dives on change detection, zone.js internals, DI. Not for beginners — read it anyway.
Course
Angular University (courses.angular-university.io)
Taught by the Angular core team. Dense, no filler.
Tool
Angular DevTools (Chrome Extension)
Visualize component trees, change detection cycles, signals. Use on every project.
RFC
Angular Signals RFC on GitHub
Read the original design document. Understanding the "why" makes the API obvious.
// Signals — the new reactivity model import { signal, computed, effect } from '@angular/core'; const count = signal(0); const doubled = computed(() => count() * 2); effect(() => { console.log(`Count: ${count()}, doubled: ${doubled()}`); }); count.set(5); // triggers effect
Practice Assignments
Task Manager App
Full CRUD task manager. Use standalone components, reactive forms with custom validators, lazy-loaded routes, and HttpClient with a mock API (json-server). Typed throughout.
PROJECT · 2 DAYS
Autocomplete Search Widget
A reusable <app-autocomplete> component using ControlValueAccessor. Must integrate with both template-driven and reactive forms. Add keyboard navigation.
COMPONENT · 1 DAY
Auth Guard System
Implement JWT auth with route guards (canActivate, canMatch), an HTTP interceptor that attaches the token, and an interceptor that handles 401 refresh logic.
SYSTEM · 1 DAY
Signals Dashboard
Rebuild an existing component that uses BehaviorSubject entirely with Signals. Measure and document the difference in change detection cycles using Angular DevTools.
REFACTOR · 4 HOURS
03
Reactive Programming · Weeks 11–16

RxJS & State
Management

⏱ 6 weeks · ~2 hrs/day
+
Tasks & Topics
  • Observable contract, hot vs cold observables, marble diagrams
    RxJS
  • Flattening operators: switchMap, mergeMap, concatMap, exhaustMap — when to use each
    RxJS
  • Subjects: Subject, BehaviorSubject, ReplaySubject, AsyncSubject
    RxJS
  • Error handling: catchError, retry, retryWhen patterns
    RxJS
  • Memory leaks: takeUntilDestroyed(), AsyncPipe, subscription management
    RxJS
  • NgRx Store: actions, reducers, selectors, effects. The full cycle.
    NgRx
  • NgRx Signals Store (v17+) — the lighter alternative
    NgRx
  • Testing observables with marble testing (TestScheduler)
    TEST
Uncommon Resources
⚡ Shortcut
Draw marble diagrams by hand before writing code. When you can visualize switchMap on paper, you'll never misuse it again. RxJS Marbles (rxmarbles.com) is your training tool.
Interactive
RxJS Marbles (rxmarbles.com)
Drag-and-drop marble diagrams for every operator. Do every single one.
Book
"RxJS in Action" — Daniels & Atencio
Explains functional reactive thinking from first principles.
Repo
rx-angular (github.com/rx-angular)
Study how production Angular + RxJS is structured at scale.
Video
Deborah Kurata — "RxJS Best Practices" (ng-conf)
Practical patterns, not theory. Watch twice.
Docs
NgRx.io — Official Docs with Decision Guide
The decision guide for "when to use NgRx vs Signals" is worth bookmarking.
// switchMap — cancels previous request // Perfect for typeahead/search search$.pipe( debounceTime(300), distinctUntilChanged(), switchMap(term => this.api.search(term).pipe( catchError(() => of([])) ) ) )
Practice Assignments
Real-time Dashboard
Build a stock/crypto price dashboard. Use WebSocket via RxJS webSocket(). Handle reconnection with retry and exponential backoff. Display live charts. Unsubscribe cleanly.
PROJECT · 3 DAYS
NgRx Shopping Cart
E-commerce cart with full NgRx: actions for add/remove/clear, a reducer, selectors for totals, and an effect that syncs to localStorage. Add entity adapter for products.
PROJECT · 2 DAYS
Operator Challenge Gauntlet
Solve 20 real problems using only RxJS operators (no loops, no async/await). Examples: debounced save, poll-until-done, parallel requests with forkJoin, sequential with concatMap.
EXERCISES · 1 DAY
"The gap between a mid-level and senior Angular developer isn't more features — it's architecture decisions made before writing a single line."
── Software Architecture Principle
04
Architecture & Testing · Weeks 17–24

Scalable
Architecture

⏱ 8 weeks · ~2 hrs/day
+
Tasks & Topics
  • Feature/Shell/Core/Shared folder structure — NX monorepo conventions
    NG
  • Smart/dumb component pattern. Container vs presentational. OnPush everywhere.
    NG
  • Lazy loading: routes, feature modules, @defer blocks (v17+)
    NG
  • Design patterns: Facade, Repository, Strategy in Angular DI context
    NG
  • Unit testing with Jest + TestBed, component harnesses
    TEST
  • E2E testing with Cypress or Playwright. Page Object Model.
    TEST
  • GitHub Actions CI pipeline: lint → test → build → deploy
    CI
  • Custom Angular schematics and builders with the Angular CLI
    NG
Uncommon Resources
⚡ Shortcut
Study open-source Angular apps. Real-world code at github.com/gothinkster/realworld (Angular implementation) shows patterns no tutorial teaches: error handling at scale, real DI hierarchies, and real barrel file discipline.
Framework
Nx (nx.dev) — Monorepo tooling for Angular
Industry standard. Learn the enforce-module-boundaries lint rule. Every large Angular shop uses it.
Book
"Angular Architecture Patterns" — Bartosz Pietrucha
Covers real enterprise architecture: facades, feature modules, state layers.
Talk
Manfred Steyer — "Strategic Design for Angular" (NG-DE)
Domain-driven design applied to Angular. Rare and powerful perspective.
Library
Angular Testing Library
Testing from the user's perspective. Discourages testing implementation details.
Practice Assignments
Enterprise Feature Slice
Build a feature module (e.g., "User Management") with: facade service, repository pattern for HTTP, smart/dumb components, 90%+ test coverage, and strict module boundary enforcement via Nx.
PROJECT · 4 DAYS
Write a Custom Schematic
Author an Angular schematic that scaffolds your feature module pattern: ng generate your-name:feature user-management generates the folder structure, barrel files, tests, and routes.
TOOLING · 2 DAYS
Full CI/CD Pipeline
Set up GitHub Actions for an Angular app: parallel jobs for lint, unit tests, e2e tests, build artifact, and Netlify/Vercel deploy on merge to main. Fail fast, cache node_modules.
DEVOPS · 1 DAY
05
Senior Craft · Weeks 25–32

Performance &
Senior Skills

⏱ 8 weeks · ~2 hrs/day
+
Tasks & Topics
  • Change detection deep dive: zone.js vs zoneless, OnPush trees, signal-based
    PERF
  • Bundle optimization: tree-shaking, differential loading, build analysis with source-map-explorer
    PERF
  • SSR & SSG with Angular Universal / @angular/ssr. Hydration.
    NG
  • Micro-frontends with Module Federation (Webpack 5 or Native Federation)
    NG
  • Accessibility (a11y): ARIA, keyboard navigation, screen reader testing with NVDA/VoiceOver
    NG
  • Code review skills: architecture critique, spotting anti-patterns, writing actionable feedback
    LEAD
  • Open-source contribution or publish an Angular library to npm
    LEAD
  • Write technical documentation and ADRs (Architecture Decision Records)
    LEAD
Uncommon Resources
⚡ Shortcut
Profile first, optimize second. Run Lighthouse, use Angular DevTools profiler, then fix what actually matters. Senior engineers know the difference between premature optimization and measured improvement.
Tool
Angular Profiler in DevTools
Profile change detection cycles per component. Find exactly which component is re-rendering too often.
Blog
web.dev (Google) — Performance Track
Core Web Vitals, CLS, LCP, INP. Understand what actually matters to users and browsers.
Framework
Native Federation (module-federation.io)
The modern Webpack 5 module federation for Angular. Used in enterprise micro-frontends.
Talk
Minko Gechev — "Angular Performance" (Angular Connect)
From the Angular lead. Covers the roadmap and internal optimizations.
Skill
Publish a library to npm
Building ng-packagr-based libraries teaches secondary entrypoints, peer deps, and semver discipline.
Practice Assignments
Full-Stack Angular App
Deploy a production-quality app with SSR, lazy routes, OnPush everywhere, a11y audit score 95+, Lighthouse score 90+, CI pipeline, and proper error boundaries. This is your portfolio centerpiece.
CAPSTONE · 1 WEEK
Micro-Frontend POC
Create a shell Angular app that loads two independent micro-frontends via Module Federation. Each MF has its own router and state. Shared singleton services. Document the tradeoffs.
ADVANCED · 3 DAYS
Publish an Angular Library
Extract a reusable component or utility from your work, package it as an Angular library with ng-packagr, write JSDoc, add a demo app, and publish to npm with proper versioning.
OPEN SOURCE · 2 DAYS

Mental Models

How Senior Devs
Actually Think

🌊
Data Flows Down
State always flows from parent to child via @Input or Signals. Events bubble up via @Output or callbacks. Never reach up and grab parent state directly.
🏗️
Design at the Seams
Spend design time on component boundaries, service contracts, and module interfaces — not implementation. Getting seams right makes everything inside them easy.
🔬
Measure, Don't Guess
Never "optimize" without a profiler open. Change detection issues, bundle bloat, and slow renders must be measured before they're fixed. Guessing wastes time and introduces bugs.
📦
Encapsulation Over Exposure
Expose the minimum public API. Services should reveal only what consumers need. Components should hide implementation details behind typed inputs. Less surface = easier changes.
🧪
Test Behavior, Not Code
Tests that break when you refactor internals are brittle and discourage improvement. Test observable behavior from the outside. If a test breaks on a rename, it's testing the wrong thing.
📖
Code is Communication
You write code for the next developer, not the compiler. Naming, structure, and type signatures are documentation. A senior dev's first PR review comment is almost always about names.

Interview Preparation

Questions They'll
Definitely Ask

Explain Angular's change detection strategies and when you'd use each.
Talk about Default vs OnPush, zone.js, signal-based reactivity, and give a real example of a performance issue you'd solve with OnPush.
What's the difference between switchMap, mergeMap, and concatMap?
Draw the marble diagrams mentally. Give real scenarios: search typeahead (switch), file uploads (merge), ordered queue (concat), prevent double-submit (exhaustMap).
How does Angular's DI system differ from simple constructor injection?
Cover hierarchical injectors, providedIn options, InjectionToken, tree-shaking of services, and multi-providers.
How would you structure a large Angular application?
Feature/Core/Shared modules, Smart/Dumb components, Facade pattern, NX library boundaries, lazy loading strategy.
How do you prevent memory leaks in Angular?
takeUntilDestroyed(), AsyncPipe, no manual subscribe in services without cleanup, Subject.complete() in ngOnDestroy.

Portfolio Checklist

What to Show
in Interviews

✦  A full-stack production Angular app
With SSR, lazy routes, CI/CD, and 90+ Lighthouse score. Link to GitHub + live URL.
✦  A reusable Angular library on npm
Shows you understand secondary entrypoints, peer dependencies, and the Angular package format.
✦  Test coverage report for your project
Aim for 85%+ with unit + e2e. Shows discipline and engineering maturity.
✦  Architecture Decision Records (ADRs)
Document why you chose NgRx over Signals Store, or why you didn't. Written thinking impresses senior interviewers.
✦  Open-source contribution or blog post
Even a small PR to a popular Angular library or a detailed dev.to article demonstrates community engagement.
✦  A technical problem you diagnosed and fixed
Prepare a STAR-format story about a real performance issue, memory leak, or architectural problem you solved. "I profiled the app, found the component re-rendered 40 times per keystroke, applied OnPush..."