Angular 7 – Alle wichtigen Infos zur neuen Version
Die Neuerungen der aktuellen Version von Angular im Detail
Mitte Oktober erschien die siebte Major-Version von Angular – einem beliebten JavaScript-Framework zum Erstellen von Web Apps. Mit dem Update gehen zahlreiche Neuerungen einher, die sowohl Angular Material als auch das CDK (Component Development Kit) sowie das Command-line Interface (CLI) betreffen. In diesem Blogartikel stellen wir die neuen Features im Detail vor.
Aktualisierte Abhängigkeiten für TypeScript und Co
Das Webframework basiert vor allem auf der Programmiersprache TypeScript, nutzt aber ebenso RxJs und Node.js. Im Zuge des Versionssprungs wurden auch die Library-Versionen aktualisiert. So arbeitet Angular 7 mit der aktuellen Version 3.1 von TypeScript sowie RxJS 6.3. Zusätzlich wird von nun an Node 10 unterstützt, wobei der Support für das etwas ältere Node 8 bestehen bleibt.
Effektiveres Erstellen von Web Apps dank CLI Prompts
Als besonders nützliche Innovation gelten die neuen Prompts im CLI. Diese liefern dem User Empfehlungen zur Verwendung weiterer Features, wenn er häufig genutzte Befehle wie ng new ausführt. Die Vorschläge des Frameworks ermöglichen es dem Nutzer, andere Bestandteile der Software wie das Routing oder den Support für SCSS leichter zu entdecken. Darüber hinaus lassen sich die CLI Prompts auch mit dem Workflow-Tool Schematics verwenden.
Gleich zwei neue Funktionen bei Angular CDK
Ein erstes neues Feature ist die Virtual-Scrolling-Funktion. Diese erleichtert und beschleunigt das Navigieren durch Listen. Auf Grundlage des angezeigten Teils einer Liste lädt beziehungsweise entfernt sie einzelne Elemente aus der Programmierschnittstelle. Demzufolge simuliert die Funktion das Rendern sämtlicher Elemente, berechnet jedoch nur den sichtbaren Abschnitt der Liste. Diese Vorgehensweise führt zum Beispiel dazu, dass eine SPA (Single Page Application) mit einer grossen Anzahl von Komponenten schneller geladen wird.
Das zweite Novum stellt Drag & Drop dar. Mit diesem Modul können Entwickler Elemente kreieren, die es dem User ermöglichen, einzelne Bausteine in einer Liste anzuordnen oder diese in eine andere Liste zu verschieben. Bevor die neuen Funktionen nutzbar sind, müssen Sie das DragDropModule und das ScrollingModule erst in ngModule importieren.
Verbesserung der Performance
Ein weiterer Fokus des Entwicklerteams bestand darin, die Performance des Frameworks zu verbessern. Viele Faktoren haben einen negativen Einfluss auf die Geschwindigkeit einer Anwendung – beispielsweise einer SPA (Single Page Application). So wurde festgestellt, dass Entwickler den Polyfill reflect-metadata häufig auch in der Produktion von Web Apps benutzen. Dieser ist jedoch lediglich bei der Entwicklung von Nöten. In Angular 7 wird der Polyfill automatisch aus der entsprechenden Datei entfernt, nachdem Sie die Applikation gebaut haben. Zusätzlich meldet sich die Software jetzt mit einer Warnung, wenn das Bundle der Applikation die Grösse von 2 MB überschreitet.
So funktioniert das Update auf Angular 7
Wie die Aktualisierung von Angular 6 auf Angular 7 zu bewerkstelligen ist, wird auf https://update.angular.io/ detailliert erklärt. Es ist jedoch ebenso möglich, das Update mittels eines einzigen Kommandos durchzuführen:
ng update @angular/cli @angular/core
Der Support für Angular 6 bleibt übrigens für's Erste bestehen. Wie Sie im Release Guide von Angular nachlesen können, wird die alte Version noch bis November 2019 mit Sicherheitsupdates und Bugfixes versorgt.