{"id":3032,"date":"2024-09-30T10:00:09","date_gmt":"2024-09-30T08:00:09","guid":{"rendered":"https:\/\/www.thecodecampus.de\/blog\/?p=3032"},"modified":"2026-04-09T11:26:24","modified_gmt":"2026-04-09T09:26:24","slug":"ganz-einfach-zu-angular-signals-migrieren","status":"publish","type":"post","link":"https:\/\/www.thecodecampus.de\/blog\/ganz-einfach-zu-angular-signals-migrieren\/","title":{"rendered":"Angular Signals Teil 4 – Ganz einfach zu Signals migrieren"},"content":{"rendered":"

Click here<\/a> for the english version of this blog post.<\/em><\/strong><\/p>\n

Mach Dir Dein Leben leichter und migriere zu Signals mit Angular 17<\/h2>\n

In den ersten drei Teilen dieser Reihe Angular Signals Teil 1 \u2013 How-to Guide f\u00fcr Angular Signals<\/a>, Angular Signals Teil 2 \u2013 Wie kombiniert man Angular Signals und RxJS<\/a>\u00a0und Angular Signals Teil 3 \u2013 Welche Vorteile haben Signal Inputs<\/a> 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\u00e4sst, damit Du so schnell wie m\u00f6glich die Vorteile von Signals nutzen kannst.<\/p>\n

In den letzten Jahren hat sich Angular kontinuierlich weiterentwickelt, um Entwicklern leistungsf\u00e4higere und effizientere Werkzeuge zur Verf\u00fcgung zu stellen. Ein wichtiger Schritt in dieser Entwicklung ist die Einf\u00fchrung von Angular Signals in Angular 17. Mit Signals k\u00f6nnen Entwickler reaktive Zust\u00e4nde auf eine intuitivere und effizientere Weise verwalten. Dennoch stellt sich f\u00fcr viele die Frage, wie Sie Ihren \u00e4lteren Angular Code nahtlos auf Angular Signals migrieren k\u00f6nnen, ohne den Entwicklungsfluss zu unterbrechen.<\/p>\n

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.<\/p>\n

Ngxtension<\/h2>\n

Ngxtension<\/a> ist ein Framework und eine Bibliothek f\u00fcr 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. \u00fcber die Angular CLI hinzuf\u00fcgen oder mit npm installieren.<\/p>\n

Befehl f\u00fcr Angular CLI:<\/p>\n

ng add ngxtension<\/pre>\n
npm Befehl:<\/p>\n
npm install ngxtension<\/pre>\n
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()<\/code>– und output()<\/code>-Funktionen kann eine m\u00fchsame und fehleranf\u00e4llige Aufgabe sein. Gl\u00fccklicherweise wird dieser Prozess durch die Verwendung von ngxtension fast komplett automatisiert.<\/p>\n
Verwende ngxtension, um @Input zu Signal Inputs zu migrieren<\/h2>\n
Mit Angular v17.1 wurden Signal Inputs ver\u00f6ffentlicht und erm\u00f6glichen es uns Entwicklern seitdem, mehr deklarative und reaktive Codemuster zu verwenden. Aus diesem Grund ver\u00f6ffentlicht ngxtensions Schematics, die die Code-Migration f\u00fcr uns \u00fcbernehmen. Dabei wird unter anderem<\/p>\n