Angular v13 ist erschienen

In der letzen Version Angular 12 wurde die “IVY-Everywhere” Parole ausgerufen, welche in Angular 13 ziemlich gut umgesetzt zu sein scheint.

Erweiterung der Ivy-basierten Funktionen und Optimierungen

Hauptsächlich wurde im neuen Release Angular 13 der Schwerpunkt auf die verbesserte Unterstützung und Optimierung von Ivy-basierten Funktionen gelegt.

View Engine ist nicht mehr verfügbar - 100% Ivy

Google hat in Angular 8 seine Rendering-Engine Ivy eingeführt. Bis Angular 12 wurde die Unterstützung für die Laufzeit-View-Engine beibehalten, was ein Nachteil war: Die Codebasis - und vor allem die zum Client übertragene Byte-Anzahl - waren groß.

Nun wurde komplett auf Ivy umgestellt

• Abhängigkeiten zu ngcc wurden verringert.
• Die Kompilierungszeit wurde beschleunigt, da weder Metadaten noch Zusammenfassungsdateien enthalten sind.

Änderungen am Angular Package Format (APF)

Das Angular Package Format (APF) wurde modernisiert und mit den folgenden Verbesserungen versehen:

• Ältere Ausgabeformate wurden entfernt (inklusive View Engine Metadaten)
• Libraries, die mit der aktuellsten Version des APF erstellt wurden, benötigen kein ngcc mehr
• Kleinere Dateigrößen und schnellere Ausführungszeiten

Einfaches Erstellen dynamischer Komponenten

Der Boilerplate zur Erstellung dynamischer Komponenten in Angular wurde verringert.

In Angular 13 brauchen wir nicht länger componentFactoryResolver um dynamische Komponenten zu erstellen.

In der letzten Version sah die Erstellung folgendermaßen aus:

@Directive({...})
export class MyDirective {
    constructor(private vcRef: ViewContainerRef,
                private componentFactoryResolver: ComponentFactoryResolver) {}

    createMyComponent() {
        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(MyComponent);

        this.vcRef.createComponent(componentFactory)
    }
}

In Angular 13 brauchen wir für das gleiche Ergebnis lediglich folgende Zeilen:

@Directive({...})
export class MyDirective {
    constructor(private vcRef: ViewContainerRef) {}

    createMyComponent() {
        this.vcRef.createComponent(MyComponent)
    }
}

Kein IE11 support mehr

• Mit Angular erstellt Apps sind nun kleiner und laden schneller, weil Internet-Explorer 11 spezifische Polyfills und code paths entfernt wurden
• Auch die Notwendigkeit des differential loadings besteht nun nicht mehr

Verbesserungen im CLI

• Persistent build cache for v13 projects
• esbuild eingeführt
• esbuild untersützt CSS-Sourcemaps und kann globales CSS optimieren

Dependency-Updates

• RxJS 7.4 ist jetzt der Standard
• Support für TypeScript 4.4 wurde eingeführt

Verbesserte Testbarkeit

• Verbesserungen für TestBed für tear-downs
• Das DOM wird nach jedem Test aufgeräumt (less memory, etc.)

Anderes

• Support für Adobe Fonts inlining
• inlining kann die app-performance verbessern (better FCP)

Fazit

Hauptsächlich Performance-Verbesserungen. Sollte Dein Projekt nicht für IE11 ausgeliefert werden, dann führe ng update durch