---
title: "The modern Angular stack roadmap"
chapter: "00"
---

# The modern Angular stack roadmap

Angular is a complete web application framework: component rendering,
dependency injection, routing, forms, HTTP, build tooling, server rendering,
testing, accessibility primitives, and an upgrade path.

## Explain it like I am five

An Angular application is a tree of components. Each component owns a piece of
the screen, receives inputs, emits events, reads state, and asks services for
work. When tracked state changes, Angular updates the affected view.

Tailwind supplies small styling rules. Flowbite supplies styled interaction
patterns. Neither replaces Angular's ownership of component state and lifecycle.

## Current compatibility baseline, August 2026

| Layer | Current baseline | Important constraint |
|---|---|---|
| Angular | 22.1.x | Actively supported |
| Angular CLI | 22.1.x | Keep framework and CLI majors aligned |
| Material / CDK | 22.1.x | Match Angular major |
| TypeScript | 6.0.x | Angular 22 requires `>=6.0 <6.1` |
| RxJS | 7.8.x | Angular supports compatible 7.x |
| Node.js | 22.22+, 24.15+, or supported 26.x | Use an Angular-supported line |
| Tailwind CSS | 4.3.x | CSS-first configuration and separate integrations |
| Flowbite | 4.0.x | Tailwind v4 themes and CSS variables |
| Unit tests | Vitest | Default for new CLI projects |
| Browser/E2E | Playwright or equivalent | Prove real browser behavior |

“Latest” means the newest **compatible set**, not the highest version of every
npm package. TypeScript 7 exists, but is outside Angular 22's supported range.

## Architecture layers

`browser → Angular router → feature shell → presentational components →
application services/state → HTTP boundary → backend`

Design tokens flow into Tailwind utilities and Flowbite themes. Accessibility,
security, performance, testing, and observability cross every layer.

## Learning loop

1. Model one user outcome.
2. Draw component and state ownership.
3. Implement the smallest route and vertical slice.
4. Test semantics and accessibility before visual polish.
5. Measure bundles, rendering, network, and Core Web Vitals.
6. Explain failure, loading, empty, and permission states.

## Feynman check

Explain the difference between Angular, TypeScript, RxJS, Tailwind, Flowbite,
Material/CDK, and the browser without calling any two of them “the frontend.”