Ruhe vor dem Sturm?

Neuerungen in Angular 10

von Manfred Steyer

Ausgabe: 10.2020

Als Wartungsrelease bringt Angular 10 vor allem Bugfixes und Abrundungen am Tooling: Beispielsweise nutzt ein neuer Strict Mode strengere Compilerprüfungen und das CLI warnt nun beim Einsatz schlecht optimierbarer CommonJS Bundles.

Angular 9 brachte den langersehnten Ivy-Compiler, an dem das Team rund zwei Jahre lang gearbeitet hat. Die Arbeiten an Version 10 wurden nun genutzt, um aufräumen. Es handelt sich dabei also primär um einen Wartungsrelease mit zahlreichen Bugfixes und internen Verbesserungen. Trotzdem hat Angular 10 auch ein paar ganz nette Abrundungen zu bieten. Um diese dreht sich der vorliegende Artikel.

Wer eine bestehende Anwendung auf Angular 10 heben möchte, muss dazu lediglich ng update ausführen:

ng update @angular/cli @angular/core

Strict Mode

Im Lauf der Zeit haben sowohl TypeScript als auch der Angular-Compiler verschiedene Optionen zur strikteren Prüfung des Quellcodes erhalten. All diese Optionen haben ein Ziel: das frühzeitige Erkennen von Programmierfehlern. Allerdings können zusätzliche Prüfungen bestehenden Quellcode brechen. Deswegen sind sie auch nicht standardmäßig aktiviert, sondern müssen über Einstellungen in der TypeScript-Konfiguration eingeschaltet werden.

Kleine Budgets bei --strict

Die Option --strict verkleinert auch die standardmäßig in der angular.json eingerichteten Performance Budgets auf ein Viertel. So gibt ng build beispielsweise bereits eine Warnung aus, wenn das initiale Bundle 500 KB überschreitet und ab 1 MB einen Fehler. Ohne den Schalter --strict liegen diese Grenzen bei 2 MB und 4 MB. Da es sich hierbei lediglich um Einträge in der angular.json handelt, lassen sich diese Grenzen bei Bedarf auch verändern.

Um das Aktivieren dieser Prüfungen bei neuen Projekten zu automatisieren, weist ng new nun einen neuen Schalter --strict auf (Kasten: „Kleine Budgets bei --strict“). Er veranlasst das CLI, die in Listing 1 gezeigten Einstellungen zu generieren.

Listing 1

"compilerOptions": { [...], "forceConsistentCasingInFileNames": true "strict": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, [...] }, "angularCompilerOptions": { "strictInjectionParameters": true, "strictTemplates": true }

Tabelle 1 bietet einen Überblick über diese Einstellungen. Hinter der Eigenschaft strict verbergen sich weitere Optionen, die TypeScript aktiviert. Ein Überblick hierzu findet sich in Tabelle 2.

Einstellung	Beschreibung
forceConsistentCasingInFileNames	Verweise auf TypeScript-Dateien müssen immer gleich geschrieben werden; der Einsatz von `import { FluxCapacitor } from './flux-capacitor.ts';` in der einen und `import { FluxCapacitor } from './Flux-Capacitor.ts';` in der anderen Datei ist demnach nicht zulässig.
strict	Aktiviert weitere optionale Prüfungen für TypeScript (Tabelle 2).
noImplicitReturns	Funktionen müssen explizit einen Wert zurückliefern; die folgende Funktion ist demnach nicht zulässig, da nur bei der Übergabe von true explizit ein Wert zurückgeliefert wird: `Function stuff(flag: boolean) { if (flag) { return 'A'; } }`
noFallthroughCasesInSwitch	Verbietet Fallthroughs bei der Nutzung von switch/case; im folgenden Beispiel muss demnach am Ende des ersten case-Zweigs ein break eingefügt werden: `Function sayHello(state: string): void { Switch (state) { Case 'talks too much': console.log('Moin'); case 'normal mood': console.log('Moin'); break; case 'tired': case 'angry': console.log('Na?'); } }` Die Kombination von tired und angry ist hingegen erlaubt, weil für beide derselbe Code ausgeführt wird.
strictInjectionParameters	Der Angular-Compiler liefert einen Fehler, wenn für einen Konstruktorparameter kein Injection-Token gefunden werden kann.
strictTemplates	Es werden zusätzliche Prüfungen in den Templates ausgeführt, z. B. ob eine Variable mit der Eigenschaft einer Subkomponente (mit einem Input) kompatibel ...