JavaScript: Angular 13 schneidet alte Zöpfe ab

Das JavaScript-Framework Angular ist in Version 13 erschienen. Das Release setzt unter dem Schlagwort "Ivy Everywhere" auf die in Ivy vereinte Pipeline für Compiler und Rendering. Die View Engine ist nicht mehr Bestandteil des Frameworks.

Als weitere Altlast entfernt Angular 13 die Anbindung an den Internet Explorer (IE) 11, um zeitgemäße Browser-Features wie CSS-Variablen und Webanimationen über native Web-APIs nutzen zu können, die Microsofts veralteter Web-Browser nicht kennt. Außerdem entfallen damit die für IE 11 erforderlichen Polyfills, die sich in vorhandenen Anwendungen mit dem Befehl ng update automatisch entfernen lassen. Wer auf den alten Browser angewiesen ist, kann bei Angular 12 bleiben, das noch bis November 2022 offiziell Support erhält.

Abschied von der View Engine

Die im Mai veröffentlichte Version 12 hatte die View Engine bereits als überholt (deprecated) deklariert, und im aktuellen Release fehlt sie endgültig. Damit ist der Umstieg auf Ivy, die Pipeline für Compiler und Rendering, abgeschlossen. Angular 8 hatte eine erste Preview an Bord, und in Version 9 wurde Ivy zum Standard für neue Angular-Anwendungen, sorgte seinerzeit aber auf dem Weg zur Stabilität zu Verzögerungen beim Release.

Lesen Sie auch

Webanwendungs-Entwicklung: So gelingt der Sprung von AngularJS zu Angular 10

Durch den Wegfall der View Engine muss Angular wohl seltener auf den Angular Compatibiliy Compiler ngcc zurückgreifen. Das soll potenziell das Kompilieren beschleunigen, da die für ngcc erforderlichen Metadaten- und Summary-Dateien nicht benötigt werden. Darüber hinaus erlaubt der Verzicht auf die View Engine zusätzliche Optimierungen.

Schlanke Dynamik

Zudem vereinfacht Angular 13 die API zum dynamischen Erstellen von Komponenten. Sie benötigt kein zusätzliches Factory-Objekt, sondern erlaubt den direkten Aufruf von ViewContainerRef.createComponent. Die API kommt mit weniger Boilerplate-Code aus, wie ein Beispiel aus dem Angular-Blog zeigt. Wo bisher folgender Code erforderlich war, um dynamisch eine neue Komponente zu erstellen:

@Directive({ � })
export class MyDirective {
    constructor(private viewContainerRef: ViewContainerRef,
                private componentFactoryResolver: 
                        ComponentFactoryResolver) {}
    createMyComponent() {
        const componentFactory = this.componentFactoryResolver.
                             resolveComponentFactory(MyComponent);
    
        this.viewContainerRef.createComponent(componentFactory);
    }
}

genügen nun folgende Codezeilen:

@Directive({ � })
export class MyDirective {
    constructor(private viewContainerRef: ViewContainerRef) {}
    createMyComponent() {
        this.viewContainerRef.createComponent(MyComponent);
    }
}

Paketformat und Barrierefreiheit

Das Team hat darüber hinaus ein paar Anpassungen für das Angular Package Format (APF) vorgenommen. Unter anderem entfallen auch dabei die Metadaten für die View Engine. Außerdem orientiert sich das Format an zeitgemäßem JavaScript wie ES2020. Mit der jüngsten APF-Version erstellte Libraries verzichten zudem auf den ngcc-Compiler. Schließlich kann das Paketformat Node Package Exports verarbeiten.

Bei den Komponenten von Angular steht im aktuellen Release die Barriefreiheit im Vordergrund. Laut eigenen Angaben hat das Team alle Material Design Components (MDC) auf die erhöhten a11y-Anforderungen überprüft – a11y steht für Accessibilty: a + 11 Buchstaben + y. Zugunsten der Barrierefreiheit haben unter anderem Checkboxes und Radio Buttons größere Abstände, und für einige Komponenten existieren Anpassungen zum Modus für hohen Kontrast.

Weitere Neuerungen in Angular 13 wie Ergänzungen zum TestBed und der persistente Build Cache lassen sich dem Angular-Blog entnehmen. Die vollständige Liste der Änderungen findet sich im Changelog.

(rme)