Angular 14 vs Angular 20
Comparison Table
| Feature | Angular 14 (Old) | Angular 20 (New) | Example |
|---|---|---|---|
| Strictly Typed Forms | Introduced typed forms (FormControl<string>) | Matured and fully stable | ts\nconst name = new FormControl<string>(''); |
| Standalone Components | Introduced (experimental) | Default way to build apps (no need NgModule) | ts\n@Component({ standalone: true })\nexport class HomeComponent {}\n |
| NgModules | Still mandatory for most apps | Optional (can mix with standalone) | Old: @NgModule({ declarations: [...] }) New: bootstrapApplication(AppComponent) |
| Signals | ❌ Not available | ✅ Core feature (reactivity model replacing heavy RxJS usage in components) | ts\nconst count = signal(0);\ncount.set(count() + 1);\n |
| Zoneless Change Detection | ❌ Only Zone.js | ✅ Zone.js optional (can run Angular without it, using signals + manual triggers) | ts\nbootstrapApplication(App, { providers: [provideZoneChangeDetection({ eventCoalescing: true })] }) |
| SSR & Hydration | Limited, experimental | First-class: @angular/ssr with full hydration support | bash\nng add @angular/ssr |
| Build Tooling | Webpack only | ESBuild + Vite support → faster builds & dev server | bash\nng serve --configuration vite |
| RxJS | Version 7 | Version 8 (with smaller, functional APIs) | Old: of(1).pipe(map(x => x+1)) New: map(of(1), x => x+1) |
| Router Enhancements | Basic lazy loading | Deferrable views (@defer) for lazy-loading parts of templates | html\n@defer (on viewport)\n <chat-widget />\n@placeholder Loading... @end |
| CLI | Standard commands | Smarter: auto-converts to standalone, better defaults, faster | bash\nng generate component home --standalone |
| Material | Angular Material v14 (legacy APIs) | Material 3 (MDC-based, theming, typography, dynamic colors) | html\n<mat-button color="tertiary">New Color</mat-button> |
| Dependency Injection | Traditional | Injection contexts, inject() API everywhere (not only in constructors) | ts\nconst router = inject(Router);\n |
✅ In short:
-
Angular 14 = still module-heavy, no signals, slower builds.
-
Angular 20 = standalone-first, signals (new reactivity), zoneless change detection, Vite/ESBuild, better SSR, Material 3.
