September 30, 2024
Angular Signals Teil 4 – Ganz einfach zu Signals migrieren
Click here for the english version of this blog post.
Mach Dir Dein Leben leichter und migriere zu Signals mit Angular 17
In den ersten drei Teilen dieser Reihe Angular Signals Teil 1 – How-to Guide für Angular Signals, Angular Signals Teil 2 – Wie kombiniert man Angular Signals und RxJS und Angular Signals Teil 3 – Welche Vorteile haben Signal Inputs haben wir uns angeschaut was Angular Signals sind, wie sie sich mit RxJS kombinieren lassen und was die Vorteile von Signal Inputs sind. Dieses Mal wollen wir Dir zeigen wie sich alter Angular Code mit Hilfe von ngxtension ganz einfach zu Signals migrieren lässt, damit Du so schnell wie möglich die Vorteile von Signals nutzen kannst.
In den letzten Jahren hat sich Angular kontinuierlich weiterentwickelt, um Entwicklern leistungsfähigere und effizientere Werkzeuge zur Verfügung zu stellen. Ein wichtiger Schritt in dieser Entwicklung ist die Einführung von Angular Signals in Angular 17. Mit Signals können Entwickler reaktive Zustände auf eine intuitivere und effizientere Weise verwalten. Dennoch stellt sich für viele die Frage, wie Sie Ihren älteren Angular Code nahtlos auf Angular Signals migrieren können, ohne den Entwicklungsfluss zu unterbrechen.
An dieser Stelle kommen Erweiterungen ins Spiel, die diese Migration vereinfachen und beschleunigen. In diesem Artikel stellen wir Dir ngxtension und zwei Erweiterungen vor, die uns in der Migration sehr geholfen haben und mit der wir effizient und strukturiert auf das neue Signal-basierte Paradigma migrieren konnten.
Wenn Du mehr über den Umgang mit Signals und Angular im Detail erfahren möchtest, besuche doch einen unserer Angular-Kurse:
- Angular Basic Schulung: https://www.thecodecampus.de/schulungen/angular
- Advanced Schulung: https://www.thecodecampus.de/schulungen/angular-advanced
- Aktuelle Schulungstermine
Ngxtension
Ngxtension ist ein Framework und eine Bibliothek für Angular, das darauf abzielt, die Entwicklung von Angular-Anwendungen zu vereinfachen. Es bietet verschiedene Erweiterungen, Utility-Funktionen und Tools, die die Arbeit mit Angular-Komponenten, Services und Modulen erleichtern. Um ngxtension in Deinen Projekten zu verwenden kannst Du es z.B. über die Angular CLI hinzufügen oder mit npm installieren.
Befehl für Angular CLI:
|
1 |
ng add ngxtension |
npm Befehl:
|
1 |
npm install ngxtension |
Nachdem ngxtension jetzt installiert ist, wollen wir uns die Migration von Inputs und Outputs genauer anschauen. Die manuelle Migration von Inputs und Outputs auf die neuen input()– und output()-Funktionen kann eine mühsame und fehleranfällige Aufgabe sein. Glücklicherweise wird dieser Prozess durch die Verwendung von ngxtension fast komplett automatisiert.
Verwende ngxtension, um @Input zu Signal Inputs zu migrieren
Mit Angular v17.1 wurden Signal Inputs veröffentlicht und ermöglichen es uns Entwicklern seitdem, mehr deklarative und reaktive Codemuster zu verwenden. Aus diesem Grund veröffentlicht ngxtensions Schematics, die die Code-Migration für uns übernehmen. Dabei wird unter anderem
- der gleichen Namen für die Inputs beibehalten.
- die gleichen Typen und Standardwerte beibehalten.
- die Komponenten Templates aktualisiert, um die neuen Signal Inputs zu verwenden.
Mehr Informationen findest Du auch in der Dokumentation zur Signal Inputs Migration von ngxtension.
Mit dem folgenden Command kannst Du Deine alten @Inputs() zu Signal Inputs migrieren:
|
1 |
ng g ngxtension:convert-signal-inputs |
Was genau macht die Signal Inputs Migration?
Hier sind einige Beispiele, um Dir einen Überblick und besseres Verständnis über die Unterschiede vor und nach der Migration der Inputs mit ngxtension zu geben. Dafür haben wir zusätzlich zu einem normalen Input auch einen Input mit einem Alias und einem default, also einem Ausgangswert, aufgeführt.
Normaler Input:
Davor:
|
1 |
@Input() value: string; |
Danach:
|
1 |
value = input<string>(); |
Input mit alias:
Davor:
|
1 |
@Input('value') valueAlias: string; |
Danach:
|
1 |
value = input<string>({ alias: 'value' }); |
Input mit default Wert:
Davor:
|
1 |
@Input() value: string = 'default'; |
Danach:
|
1 |
value = input<string>({ initialValue: 'default' }); |
Verwende ngxtension, um @Output zu migrieren
Die neue output()-Funktion wurde in Angular v17.3 eingeführt. Analog zur input()-Funktion zur Erzeugung von Signal Inputs, kann die output()-Funktion zur Erzeugung von Outputs, ohne Decorator verwendet werden. Ngxtension hat spezielle Schematics veröffentlicht, die die Migration des Codes automatisieren.
Wenn das Schema ausgeführt wird, sucht es nach allen Decorators, die Outputs sind und konvertiert sie in funktionsbasierte Outputs. Dabei wird ebenfalls
- der gleichen Namen für die Outputs beibehalten.
- die gleichen Typen beibehalten.
- derselben Alias beibehalten, wenn er vorhanden ist.
Mehr Informationen findest Du auch in der Dokumentation zur New output() Migration von ngxtension.
Mit dem folgenden Command startest Du die Migration der @Output-Funktionen:
|
1 |
ng g ngxtension:convert-outputs |
Was genau macht die output() Migration?
Auch hier haben wir zwei Beispiele, um Dir einen Überblick und besseres Verständnis über die Unterschiede vor und nach der Migration mit ngxtension zu geben.
Normaler Output:
Davor:
|
1 |
@Output() change = new EventEmitter<string>(); |
Danach:
|
1 |
change: EventEmitter<string> = output<string>(); |
Output mit alias:
Davor:
|
1 |
@Output('change') changeAlias = new EventEmitter<string>(); |
Danach:
|
1 |
change: EventEmitter<string> = output<string>({ alias: 'change' }); |
Was kommt als nächstes?
Da unser Code jetzt auf dem neusten Stand ist wollen wir uns im nächsten Beitrag dieser Artikelreihe einer etwas größeren Aufgabe widmen. Wir werden Schritt für Schritt zeigen wie man eine Custom Directive auf Signals refactored, erklären auf welche Punkte man besonders achten muss und welche Vorteile sich dadurch bieten.
Terminübersicht der nächsten Angular Schulungen
Marc Dommröse
Developer at 