Aggiornamento alla versione angolare 15

Sterling Store Engagement è aggiornato alla versione 15 di Angular. Accertarsi di migrare le estensioni alla versione 15 di Angular.

Prima di iniziare

È necessario disporre dello spazio di lavoro Angular versione 13 dal DTK 23.1.3.2-10.0.2303.2 .
Assicurati di essere alla node.js versione 14.19.0.

Informazioni su quest'attività

L'attività di migrazione è un processo in due fasi. Per prima cosa, è necessario migrare da Angular versione 13 a 14, quindi migrare dalla versione 14 a 15.

Procedura

Eseguire tutti i comandi dalla cartella <WORKSPACE>/store-frontend-src .

Aggiorna Angular core e cli alla versione 14 immettendo il seguente comando:
```
ng update @angular/core@14 @angular/cli@14 --allow-dirty --force
```
Aggiungi la dipendenza, @messageformat/core con la versione 3.1.0 immettendo il seguente comando:
```
yarn add -W @messageformat/core@3.1.0
```
Aggiornare la dipendenza single-spa-angular alla versione 7.1.0 immettendo il seguente comando:
```
yarn upgrade single-spa-angular@7.1.0
```
Aggiorna devDependency, @angular-builders/custom-webpack alla versione 14.1.0 immettendo il comando seguente:
```
yarn upgrade @angular-builders/custom-webpack@14.1.0 --dev
```
Scaricare e installare la versione di node.js 16.4.0.
1. Nella variabile di ambiente PATH, aggiornare /path/to/nodejs-16.14.0/bin.
2. Verificare la versione del nodo immettendo il seguente comando:
```
node -v
```
Installa yarn versione 1.22.5 globalmente immettendo il seguente comando:
```
npm install --global yarn
```
Installare Lerna come modulo globale eseguendo il seguente comando:
```
npm install -g lerna@4.0.0
```

Creare il seguente file test.ts e copiare il file in extensions/features/override-component/src/. Il file test.ts è importante per la corretta esecuzione dello script di aggiornamento angolare.

/*******************************************************************************
* 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 }
}
);

Sostituire devDependencies della libreria di stili presenti in /extensions/libs/styles/package.json e /packages/libs/styles/package.json.

"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"
  },

Eliminare il file di yarn.lock presente in store-frontend-src.
Installare devDependencies immettendo il seguente comando:
```
yarn bootstrap
```
Aggiorna Angular core e cli alla versione 15 immettendo il seguente comando:
```
ng update @angular/core@15 @angular/cli@15 --allow-dirty --force
```
Aggiorna le seguenti dipendenze eseguendo il comando corrispondente.
- Aggiornare ngx-translate-messageformat-compiler a 6.2.0 immettendo il seguente comando:
```
yarn upgrade ngx-translate-messageformat-compiler@6.2.0
```
- Aggiornare single-spa-angular a 8.1.0 immettendo il seguente comando:
```
yarn upgrade single-spa-angular@8.1.0
```
- Aggiornare @carbon/chartsa 1.7.6 immettendo il seguente comando:
```
yarn upgrade @carbon/charts@1.7.6
```
- Aggiornare @carbon/charts-angular a 1.7.6 immettendo il seguente comando:
```
yarn upgrade @carbon/charts-angular@1.7.6
```
Aggiorna devDependency e @angular-builders/custom-webpack alla versione 15.0.0 immettendo il seguente comando:
```
yarn upgrade @angular-builders/custom-webpack@15.0.0 --dev
```
Avviare l'applicazione eseguendo il seguente comando e verificare che le schermate personalizzate funzionino correttamente.
```
yarn start-app
```
Quando si esegue questo comando, se vengono visualizzati degli errori relativi alle verifiche del tipo, correggere il codice di estensione per definire i tipi appropriati per le variabili.
Il comando build-app:extension presente in package.json di tutte le applicazioni estese deve essere modificato per considerare l'argomento di configurazione. Ad esempio, "build-app:extension": "ng build override-component --prod" deve essere modificato in "build-app:extension": "ng build override-component --configuration production"
Impostare un nuovo spazio di lavoro dalla DTK 23.2.6.0-10.0.2306.0 .
1. Copia angular.json dall'area di lavoro precedente al nuovo spazio di lavoro.
2. Copiare le estensioni migrate dal workspace precedente al nuovo workspace.
3. Eseguire nuovamente i seguenti comandi per verificare le estensioni.
```
yarn bootstrap
```
```
yarn start-app
```
Nota:
- Copiare o sostituire il contenuto di src/app/app.component.ts delle applicazioni override - component e override - modals in extensions/features/override-component e extensions/features/override-modals dall'ultimo DTK.
- Poiché la versione 13 di Angular non è più supportata, è necessario aggiornare le personalizzazioni dell'interfaccia utente alla versione Angular più recente o supportata. Per ulteriori informazioni, si veda la sezione Versioni e rilasci di Angular.
- Se non è possibile migrare ad Angular versione 15, ma si desidera modificare le proprie estensioni in Angular 13, è possibile continuare a creare le proprie personalizzazioni con il DTK 23.1.3.1-10.0.2303.2 precedente. Per ottenere le funzioni, i miglioramenti e le correzioni più recenti, è necessario eseguire l'aggiornamento a Angular versione 15.