Migration von AngularJS nach Angular7 über eine Hybrid-App
Die Aufgabe ist nicht die einfachste, aber machbar.
Ich bin ihr begegnet, als ich in eine neue Firma gezogen bin.
Die Tatsache, dass es machbar ist, kann im
Handbuch gefunden werden .
Es wurde speziell entwickelt, um den Übergang zu vereinfachen, ohne dass ein neues Projekt erstellt und jede Komponente von Anfang an neu geschrieben werden muss.
Wie von den Entwicklern geplant, sollte unser Projekt sowohl mit AngularJS als auch mit Angular, der neuen Version, arbeiten und den Code schrittweise ersetzen.
Also habe ich beschlossen, es zu tun.
Der Leitfaden ist recht ausführlich, enthält aber im Grunde den theoretischen Teil.
Für eine Person, die sich früher hauptsächlich mit Vue befasst hat, ist es nicht so einfach, die Komplexität der Organisation von Frameworks sofort zu verstehen.
Die Hauptschwierigkeit für mich war, dass die Struktur der Projekte auf AngularJS und Angular7 unterschiedlich ist.
Daher müssen alle Abhängigkeiten, Dienste und Komponenten manuell neu geschrieben werden.
Tatsächlich verliert jede Hybridität mit diesem Ansatz ihre Bedeutung, da die Anwendung in jedem Fall vollständig neu geschrieben werden muss.
Also habe ich am Anfang keinen günstigeren Weg gefunden.
Es gibt jedoch eine bessere Option.
Hier fand ich viel nützliches.
Ich werde im Detail beschreiben, was ich getan habe.
Sie müssen ein neues Projekt erstellen.
In Node.js:
npm install -g @angular/cliInstallieren Sie Angular global.
Als Nächstes müssen Sie einen Ordner für die Anwendung erstellen und über Node.js dorthin wechseln.
Die Hauptbefehle, die hier erforderlich sein können, um den gewünschten Ordner zu finden:
cd _ und
cd .. , um zum obigen Verzeichnis zurückzukehren.
Wenn der Projektordner gefunden wurde, müssen Sie ein Projekt darin erstellen.
In Node.js schreiben wir:
ng new _Beim Erstellen des Projekts werden Ihnen verschiedene Optionen für die Anwendung angeboten, bei denen Sie die gewünschten Parameter angeben müssen.
Wenn die Anwendung erstellt wurde, können Sie sie mit dem folgenden Befehl im Browser öffnen:
ng serve --openEs gibt jedoch noch nichts zu öffnen.
Jetzt müssen Sie die Abhängigkeiten installieren, die erforderlich sind, damit AngularJS und Angular funktionieren:
npm install --save @angular/upgradeVon nun an unterstützt die Anwendung beide Frameworks.
Öffnen Sie nun das alte Projekt und suchen Sie nach der Datei package.json.
Es werden alle Abhängigkeiten aufgelistet, die für den Betrieb unserer Anwendung erforderlich sind.
Sie müssen manuell installiert werden.
Zum Beispiel:
npm install --save angular @uirouter/angularjsNach diesem Schritt können Sie alle globalen Stile in die neue Anwendung übertragen.
Jetzt übertragen wir alle Dateien aus der App.
Für die obige Anleitung gehen wir weiter.
Ändern Sie den Namen der Stammkomponente.
In app.module.ts fügen Sie die Zeile hinzu:
import * as angular from 'angular';
Dies ist im Handbuch nicht angegeben, aber ohne es kann keine Hybridisierung erreicht werden.
Jetzt haben wir eine Anwendung, die theoretisch ein Hybrid sein sollte.
In der Praxis können zu diesem Zeitpunkt verschiedene Fehler auftreten, die hauptsächlich auf Abhängigkeiten zurückzuführen sind, über die ich in einem separaten Artikel schreiben werde.
Wenn dies nicht der Fall ist, wechseln Sie das Modul nach dem AngularJS-Modul in die gewünschte Angular-Version.
Dieser Artikel bietet eine hervorragende visuelle Darstellung der Hauptunterschiede zwischen dem Code der beiden Frameworks.
Schritt für Schritt, und Sie haben keine einzige Zeile mehr auf AngularJS.