Wenn neue Angular-Versionen veröffentlicht werden, wird Order Hub oft auf die neueste Version aktualisiert. Diese Änderungen bringen Verbesserungen wie schnellere Installationen, Start- und Bauzeiten mit sich. Wenn Sie eine frühere Version von Angular verwenden, sollten Sie Ihre benutzerdefinierten Anwendungen auf die neueste Version von Angular migrieren, um die neuen Funktionen nutzen zu können. Diese neuen Anwendungen können entweder in einem Monorepo oder einem Standard-Angular-Repository gespeichert werden.
Informationen zu diesem Vorgang
Um sicherzustellen, dass Ihre Anpassungen ordnungsgemäß funktionieren, müssen Sie Ihre Anpassungen als Prozess schrittweise aktualisieren (Aktualisierung auf v16, v17, v18 und dann v20 ). Entfernen Sie bei jedem Angular-Versions-Upgrade Pakete wie @angular/material oder @angular/cdk aus dem Befehl, wenn sie nicht Teil von package.json sind, aber Abhängigkeiten enthalten, die Teil des Upgrades sein müssen.
Die Migrationsschritte können variieren, wenn es sich bei dem Projekt nicht um ein Lerna-Projekt handelt. In diesem Fall aktualisieren Sie zuerst die Angular-Versionen und dann das Material und andere Abhängigkeiten.
- Aktualisierungen der Umgebungsabhängigkeiten
- Node.js Upgrade: Angular v20 erfordert ein Upgrade von Node.js auf Version 24.
- ESLint-Update: Aktualisieren Sie die Abhängigkeit
"eslint-plugin-jsdoc" auf Version "^62.0.0".
- Funktionsanforderungen
- Standalone (erforderlich): Sie müssen diese Funktion auf Komponentenebene deklarieren, damit sie ordnungsgemäß funktioniert. Stellen Sie sicher, dass die entsprechenden Komponenten entsprechend aktualisiert werden.
- Kontrollflussblock (optional): Um die Funktionalität und Flexibilität zu verbessern, können Sie die Syntax des Kontrollflussblocks anstelle von „ ngIf “ verwenden.
Vorgehensweise
- Aktualisieren Sie Angular v16 wie folgt.
Aufgrund von Abhängigkeiten zwischen den Komponenten und der Inkompatibilität des Pakets mit den gemeinsamen Komponenten ist das Update auf Angular v16 zwingend erforderlich.
- Für ein eigenständiges Angular-Projekt
- Die folgenden Befehle eingeben:
yarn ng update @angular/core@16 @angular/cli@16 --force
yarn ng update @angular/cdk@16 @angular-eslint/schematics@16 @angular/material@16 --force
Hinweis : @angular-builders/custom-webpack@16 nicht in das Upgrade für eigenständige Projekte einbeziehen. Der Befehl ist in zwei Befehle aufgeteilt.
- Für ein Monorepo
- Geben Sie den folgenden Befehl ein.
yarn ng update @angular/core@16 @angular/cli@16 @angular-builders/custom-webpack@16 @angular/cdk@16 @angular-eslint/schematics@16 @angular/material@16 --force
Überprüfen Sie Ihre Updates mit
dem Angular-Update-Leitfaden.
- Aktualisieren Sie Angular v17 wie folgt.
Wenn das Paket
@angular-devkit/build-ng-packagr in Ihrer
package.json -Datei vorhanden ist, deinstallieren Sie es.
- Für ein eigenständiges Angular-Projekt
- Die folgenden Befehle eingeben:
yarn ng update @angular/core@17 @angular/cli@17 --force
yarn ng update @angular/cdk@17 @angular-eslint/schematics@17 @angular/material@17 --force
- Für ein Monorepo
- Geben Sie den folgenden Befehl ein.
yarn ng update @angular/core@17 @angular/cli@17 @angular-builders/custom-webpack@17 @angular/cdk@17 @angular-eslint/schematics@17 @angular/material@17 --force
Überprüfen Sie Ihre Aktualisierungen anhand der
Angular-Aktualisierungsanleitung.
- Aktualisieren Sie Angular v18 wie folgt.
- Für ein eigenständiges Angular-Projekt
- Die folgenden Befehle eingeben:
yarn ng update @angular/core@18 @angular/cli@18 --force
yarn ng @angular/cdk@18 @angular-eslint/schematics@18 @angular/material@18 --force
- Für ein Monorepo
- Geben Sie den folgenden Befehl ein.
yarn ng update @angular/core@18 @angular/cli@18 @angular-builders/custom-webpack@18 @angular/cdk@18 @angular-eslint/schematics@18 @angular/material@18 --force
Hinweis : Wenn Sie diesen Befehl ausführen, wird eine Migrationsaufforderung zur Verwendung des Anwendungsgenerators (use-application-builder) angezeigt. Wenn Sie ein Upgrade eines morepo durchführen, klicken Sie auf „Enter“, um fortzufahren. Verwenden Sie nicht die @angular-devkit/build-angular:browser-esbuild oder die @angular-devkit/build-angular:browser Builder.
Überprüfen Sie Ihre Aktualisierungen anhand der
Angular-Aktualisierungsanleitung.
- Aktualisieren Sie die Angular- v19, wie folgt.
- Für ein eigenständiges Angular-Projekt
- Die folgenden Befehle eingeben:
yarn ng update @angular/core@19 @angular/cli@19 --force
yarn ng @angular/cdk@19 @angular-eslint/schematics@1 @angular/material@19 --force
- Für ein Monorepo
- Geben Sie den folgenden Befehl ein.
yarn ng update @angular/core@19 @angular/cli@19 @angular-builders/custom-webpack@19 @angular/cdk@19 @angular-eslint/schematics@19 @angular/material@19 --force
Hinweis : Wenn Sie diesen Befehl ausführen, wird eine Migrationsaufforderung zur Verwendung des Anwendungsgenerators (use-application-builder) angezeigt. Wenn Sie ein Upgrade eines morepo durchführen, klicken Sie auf „Enter“, um fortzufahren. Verwenden Sie nicht die @angular-devkit/build-angular:browser-esbuild oder die @angular-devkit/build-angular:browser Builder.
Überprüfen Sie Ihre Aktualisierungen anhand der
Angular-Aktualisierungsanleitung.
- Aktualisieren Sie die Angular- v20, wie folgt.
- Für ein eigenständiges Angular-Projekt
- Die folgenden Befehle eingeben:
yarn ng update @angular/core@20 @angular/cli@20 --force
yarn ng @angular/cdk@20 @angular-eslint/schematics@20 @angular/material@20 --force
- Für ein Monorepo
- Geben Sie den folgenden Befehl ein.
yarn ng update @angular/core@20 @angular/cli@20 @angular-builders/custom-webpack@20 @angular/cdk@20 @angular-eslint/schematics@20 @angular/material@20 --force
Hinweis : Wenn Sie diesen Befehl ausführen, wird eine Migrationsaufforderung zur Verwendung des Anwendungsgenerators (use-application-builder) angezeigt. Wenn Sie ein Upgrade eines morepo durchführen, klicken Sie auf „Enter“, um fortzufahren. Verwenden Sie nicht die @angular-devkit/build-angular:browser-esbuild oder die @angular-devkit/build-angular:browser Builder.
Überprüfen Sie Ihre Aktualisierungen anhand der
Angular-Aktualisierungsanleitung.
Nächste Schritte
Führen Sie nach Abschluss der Aktualisierung auf die neueste Angular-Version die folgenden Schritte aus.
- Vergewissern Sie sich, dass Sie Ihre geänderten Moduldateien lintifizieren. Wenn die Schaltpläne sie nicht korrekt entfernt haben, entfernen Sie HttpClientModule manuell.
- Aktualisieren Sie Ihre .eslintrc.json -Dateien. Entfernen Sie zwei der Steckverlängerungen und fügen Sie eine Steckverlängerung hinzu.
"extends": [
"plugin:@angular-eslint/ng-cli-compat", // - Remove
"plugin:@angular-eslint/ng-cli-compat--formatting-add-on", // - Remove
"plugin:@angular-eslint/recommended", // + Add
"plugin:@angular-eslint/template/process-inline-templates" // No Change
],
Aktualisieren Sie die folgenden Lint-Regeln."@angular-eslint/no-host-metadata-property": "off"
"@angular-eslint/prefer-standalone": "off"
"@angular-eslint/prefer-inject": "off"
"jsdoc/tag-lines": ["error", "any"
{ "startLines": 1 }]
"@angular-eslint/template/prefer-control-flow": "error"
Entfernen Sie den folgenden Parameter."jsdoc/newline-after-description": "error"
- Installieren Sie die Abhängigkeit @types/topojson-specification , indem Sie den folgenden Befehl eingeben.
yarn add -D @types/topojson-specification ## (include `-W` for lerna monorepo)
- Um die neuesten verfügbaren Versionen zu verwenden, ändern Sie alle @buc -Namensraumpakete in der package.json -Datei Ihres Projekts. Ändern Sie die Versionen auf die neueste Version gemäß dem Inhalt der Datei orderhub-code/lib .