Upgrade auf Angular Version 15

Sterling Store Engagement wurde auf Angular Version 15 aktualisiert. Stellen Sie sicher, dass Sie Ihre Erweiterungen auf Angular Version 15 migrieren.

Vorbemerkungen

Sie benötigen einen Angular-Arbeitsbereich der Version 13 aus dem DTK 23.1.3.2-10.0.2303.2 .
Stellen Sie sicher, dass Sie node.js Version 14.19.0verwenden.

Informationen zu diesem Vorgang

Die Migrationsaktivität ist ein aus zwei Schritten bestehender Prozess. Zuerst müssen Sie von Angular Version 13 auf 14 und dann von Version 14 auf 15 migrieren.

Vorgehensweise

Führen Sie alle Befehle im Ordner <WORKSPACE>/store-frontend-src aus.

Aktualisieren Sie Angular core und cli auf Version 14, indem Sie den folgenden Befehl ausführen:
```
ng update @angular/core@14 @angular/cli@14 --allow-dirty --force
```
Fügen Sie die Abhängigkeit @messageformat/core mit Version 3.1.0 hinzu, indem Sie den folgenden Befehl ausführen:
```
yarn add -W @messageformat/core@3.1.0
```
Führen Sie den folgenden Befehl aus, um die Abhängigkeit single-spa-angular auf Version 7.1.0 zu aktualisieren:
```
yarn upgrade single-spa-angular@7.1.0
```
Aktualisieren Sie devDependency @angular-builders/custom-webpack auf Version 14.1.0 , indem Sie den folgenden Befehl ausführen:
```
yarn upgrade @angular-builders/custom-webpack@14.1.0 --dev
```
Laden Sie die node.js Version 16.4.0.
1. Aktualisieren Sie /path/to/nodejs-16.14.0/binin der Umgebungsvariablen PATH.
2. Überprüfen Sie die Knotenversion, indem Sie den folgenden Befehl ausführen:
```
node -v
```
Installieren Sie die YARN-Version 1.22.5 global, indem Sie den folgenden Befehl ausführen:
```
npm install --global yarn
```
Installieren Sie Lanna als globales Modul, indem Sie den folgenden Befehl ausführen:
```
npm install -g lerna@4.0.0
```

Erstellen Sie die folgende Datei test.ts und kopieren Sie die Datei nach extensions/features/override-component/src/. Die Datei test.ts ist wichtig, damit das Winkelupgrade-Script erfolgreich ausgeführt werden kann.

/*******************************************************************************
* IBM Confidential
* IBM® Sterling Order Management System
Software (5737-D18)
* IBM Sterling Order Management System
Software (5725-D10)
* (C) Copyright IBM Corp. 2022
******************************************************************************/
// This file is required by karma.conf.js and loads recursively all the .spec and framework files

import 'zone.js/testing';
import { getTestBed } from '@angular/core/testing';
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';

// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting(), {
    teardown: { destroyAfterEach: false }
}
);

Ersetzen Sie devDependencies der in /extensions/libs/styles/package.json und /packages/libs/styles/package.jsonvorhandenen Stilbibliothek.

"devDependencies": {
    "@ng-bootstrap/ng-bootstrap": "12.1.1",
    "autoprefixer": "^9.0.0",
    "breakpoint-sass": "^2.7.1",
    "css-loader": "^2.0.0",
    "cssnano": "^4.0.5",
    "file-loader": "^6.2.0",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^6.0.1",
    "postcss-loader": "^3.0.0",
    "resolve-url-loader": "^5.0.0",
    "sass-loader": "13.2.2",
    "style-loader": "^0.23.1",
    "url-loader": "^4.1.1",
    "webpack": "^5.51.1",
    "webpack-cli": "^4.9.2"
  },

Löschen Sie die Datei yarn.lock in store-frontend-src.
Installieren Sie devDependencies , indem Sie folgenden Befehl ausführen:
```
yarn bootstrap
```
Führen Sie Angular core und cli auf Version 15 durch, indem Sie den folgenden Befehl ausführen:
```
ng update @angular/core@15 @angular/cli@15 --allow-dirty --force
```
Aktualisieren Sie die folgenden Abhängigkeiten, indem Sie den entsprechenden Befehl ausführen.
- Aktualisieren Sie ngx-translate-messageformat-compiler auf 6.2.0 , indem Sie den folgenden Befehl ausführen:
```
yarn upgrade ngx-translate-messageformat-compiler@6.2.0
```
- Aktualisieren Sie single-spa-angular auf 8.1.0 , indem Sie den folgenden Befehl ausführen:
```
yarn upgrade single-spa-angular@8.1.0
```
- Aktualisieren Sie @carbon/chartsmit dem folgenden Befehl auf 1.7.6 :
```
yarn upgrade @carbon/charts@1.7.6
```
- Aktualisieren Sie @carbon/charts-angular mit dem folgenden Befehl auf 1.7.6 :
```
yarn upgrade @carbon/charts-angular@1.7.6
```
Aktualisieren Sie devDependency und @angular-builders/custom-webpack auf Version 15.0.0 , indem Sie den folgenden Befehl ausführen:
```
yarn upgrade @angular-builders/custom-webpack@15.0.0 --dev
```
Starten Sie die Anwendung, indem Sie den folgenden Befehl ausführen, und überprüfen Sie, ob die angepassten Anzeigen ordnungsgemäß funktionieren.
```
yarn start-app
```
Wenn Sie diesen Befehl ausführen und Fehler im Zusammenhang mit Typüberprüfungen auftreten, korrigieren Sie den Erweiterungscode, um die richtigen Typen für Variablen zu definieren.
Der Befehl build-app:extension , der in package.json aller erweiterten Anwendungen vorhanden ist, muss geändert werden, um das Konfigurationsargument zu berücksichtigen. Beispielsweise muss "build-app:extension": "ng build override-component --prod" in "build-app:extension": "ng build override-component --configuration production" geändert werden.
Richten Sie einen neuen Arbeitsbereich aus dem DTK 23.2.6.0-10.0.2306.0 ein.
1. Kopieren Sie angular.json aus dem vorherigen Arbeitsbereich in den neuen Arbeitsbereich.
2. Kopieren Sie die migrierten Erweiterungen aus dem vorherigen Arbeitsbereich in den neuen Arbeitsbereich.
3. Führen Sie die folgenden Befehle erneut aus, um Erweiterungen zu testen.
```
yarn bootstrap
```
```
yarn start-app
```
Hinweis:
- Kopieren oder ersetzen Sie den Inhalt von src/app/app.component.ts der Anwendungen "override-component" und "override-modals" unter extensions/features/override-component und extensions/features/override-modals aus dem neuesten DTK.
- Da Angular Version 13 nicht mehr unterstützt wird, müssen Sie Ihre Benutzerschnittstellenanpassungen auf die neueste oder unterstützte Angular-Version aktualisieren. Weitere Informationen finden Sie unter Angular Versionierung und Releases.
- Wenn Sie nicht auf Angular Version 15 migrieren können, aber Ihre Erweiterungen in Angular 13 ändern möchten, können Sie Ihre Anpassungen mit dem vorherigen DTK 23.1.3.1-10.0.2303.2 weiter erstellen. Um die neuesten Features, Erweiterungen und Fixes zu erhalten, müssen Sie ein Upgrade auf Angular Version 15 durchführen.