© koya979/Shutterstock.com, © Nadiia Ishchenko/Shutterstock.com, © S&S Media
Neuerungen in Angular 7 und der Ausblick in die Zukunft

Die Ruhe vor dem Sturm


Angular 7 bringt ein paar nette Abrundungen und Bugfixes. Die meisten Ressourcen fließen derzeit jedoch in den neuen Ivy-Compiler, der nicht nur kleinere Bundles erzeugt, sondern auch mehr Flexibilität bringt. Dieser wird in ein paar Monaten der Allgemeinheit zur Verfügung gestellt.

Gemäß des sich selbst auferlegten halbjährlichen Releasezyklus war es im Oktober 2018 wieder so weit: Das Angular-Team hat ein neues Major Release veröffentlicht. Mittlerweile sind wir bei Version 7. Der Übergang zu dieser Version ist erfrischend geradlinig – der einzige Breaking Change ist, dass man auch das neue TypeScript 3.1 installieren muss. Und selbst diese einfache Migration wurde mit einem Skript automatisiert.

Die neue Version kommt mit ein paar Bugfixes und einer sehr überschaubaren Menge neuer Features [1]. Der Grund für diesen geringen Featurezuwachs ist, dass das Core-Team derzeit alle Ressourcen in den nächsten großen Coup investiert: Der neue Ivy-Compiler, der zum einen für kleinere Bundles sorgt und zum anderen Angular um einiges flexibler gestaltet. Dieser soll in den nächsten Monaten erscheinen und sich über ein Feature-Flag aktivieren lassen.

Dieser Artikel geht auf die wichtigsten Neuerungen von Angular 7 und dem dazugehörigen Angular CLI 7 ein [2].

Upgrade

Dank des relativ jungen CLI-Befehls update ist die Aktualisierung des Frameworks fast zu einfach, um wahr zu sein. Es reicht folgende Anweisung:

ng update @angular/cli @angular/core

Das veranlasst das CLI, die neuesten Pakte zu laden und die package.json zu aktualisieren. Danach sollte sich die Anwendung mit der neuen Angular-Version starten lassen.

Shadow DOM 1.0 und Content Projection

Shadow DOM ist einer der Standards, an denen sich Angular von Anfang an orientiert. Die aus der Welt der Web Components stammende Idee ist, einer Komponente eigene Styles zu spendieren, ohne dass sich diese auf andere Komponenten auswirken. Da nicht alle Browser Shadow DOM unterstützen, nutzt das Framework standardmäßig eine Emulation. Die ist in der Regel ganz passabel, kann aber nicht den vollen Umfang einer browserbasierten Implementierung bieten.

Um Letztere zu aktivieren, ist die Eigenschaft encapsulation im Component-Dekorator auf ViewEncapsulation.Native zu setzen. Allerdings nutzt diese Option lediglich die sogenannte Version 0 von Shadow DOM. Die Browserhersteller haben sich mittlerweile auf eine Version 1 geeinigt und implementieren sie auf breiter Basis.

Sie lässt sich seit der Angular-Version 6.1 mit der Eigenschaft ViewEncapsulation.ShadowDom aktivieren. Neu ist nun mit Version 7, dass Angular im Zusammenspiel mit Shadow DOM 1 auch Content Projection erlaubt. Das bedeutet, dass die Komponente beim Aufruf HTML-Fragmente entgegennimmt und diese an bestimmten Stellen in ihrem Template platziert.

Zur Veranschaulichung dieser Möglichkeit verwende ich hier die in Abbildung 1 dargestellte Komponente.

steyer_angular7_1.tif_fmt1.jpgAbb. 1: Web Component mit Shadow DOM 1 und Content Projection

Während die Komponente die drei Werte für das Diagramm über ein Property Binding entgegennimmt, schleust der Aufrufer die Überschrift sowie die Texte am Ende über Content Projection ein. Im Kontext von Shadow DOM 1 (Listing 1) kann das Template der Komponente mit den neuen slot-Elementen darauf verweisen (Listing 2).

Listing 1

@Component({ selector: 'app-dashboard-tile', templateUrl: './dashboard-tile.component.html', encapsulation: ViewEncapsulation.ShadowDom }) export class DashboardTileComponent implements OnInit { @Inp...

Neugierig geworden?

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang