Anpassungen an die neueste Angular-Version aktualisieren

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 nacheinander (Aktualisierung auf v16, v17 und dann v18 ) in Etappen aktualisieren. 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.

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 Updates mit dem Angular-Update-Leitfaden.
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 Morepo upgraden, klicken Sie auf "Enter", um fortzufahren. Verwenden Sie nicht die @angular-devkit/build-angular:browser-esbuild - oder @angular-devkit/build-angular:browser -Builder.
Überprüfen Sie Ihre Updates mit dem Angular-Update-Leitfaden.

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
],

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 .