Vite als Standard Build-Tool

Angular 20: Vite wird der neue Standard!

• Bis zu 90% schneller in Development
• Hot Module Replacement (HMR) out-of-the-box
• Bessere Source Maps
• Native ESM Support

Vite vs esbuild

Vorher (esbuild):

• Nur für Production Builds
• Dev-Server basiert auf Webpack

Jetzt (Vite):

• Dev + Production Builds
• Schnelleres Feedback
• Besseres Developer Experience
• Native Browser-Features

ng-template Type-Checking Improvements

@Component({
  template: `
    <ng-template let-item>
      <!-- Jetzt: Type-Safe! -->
      {{ item.name.toUpperCase() }}
    </ng-template>
  `
})
export class MyComponent {
  // TypeScript erkennt jetzt Typen in Templates
}

Angular 21: Zoneless ist jetzt Developer Preview (nicht mehr experimental)

import { provideZonelessChangeDetection } from '@angular/core';

bootstrapApplication(AppComponent, {
  providers: [
    provideZonelessChangeDetection()
  ]
});

• ~30 KB weniger Bundle-Größe (Zone.js entfernt)
• Bessere Performance bei Signal-basierten Apps
• Vollständig mit Signals kompatibel

TypeScript 5.7 Support

• Bessere Type Inference
• Neue Control Flow Analysis
• Performance-Verbesserungen beim Compilieren
• Iterator Helpers Support

Breaking Changes

• Node.js < 18.19 nicht mehr supported
• Alte ngcc komplett entfernt
• ModuleWithProviders ohne Generic depreciert
• Legacy View Engine APIs entfernt
• ActivatedRouteSnapshot.fragment jetzt Signal
• Router.events Observable-Änderungen
• Einige deprecierte @angular/common APIs entfernt

Improved Error Messages

Before:
NG0100: ExpressionChangedAfterItHasBeenCheckedError

After:
NG0100: Expression has changed after it was checked
Component: UserListComponent
Expression: {{ user.name }}
Previous value: 'John', Current value: 'Jane'
Caused by: updateUser() in ngAfterViewInit

DevTools Improvements

• Signal-Dependencies visualisieren
• Performance-Profiling für Zoneless Apps
• Component-Tree mit Signal-Values
• Better Memory Profiling