Mise à niveau vers Angular version 15

Sterling Store Engagement est mis à jour vers la version 15 d'Angular. Veillez à migrer vos extensions vers Angular version 15.

Avant de commencer

Vous devez disposer de l'espace de travail Angular version 13 à partir du DTK 23.1.3.2-10.0.2303.2 .
Vérifiez que vous utilisez node.js version 14.19.0.

A propos de cette tâche

L'activité de migration est un processus en deux étapes. Tout d'abord, vous devez migrer depuis Angular version 13 vers la version 14, puis migrer depuis la version 14 vers la version 15.

Procédure

Exécutez toutes les commandes à partir du dossier <WORKSPACE>/store-frontend-src .

Mettez à niveau Angles core et cli vers la version 14 en exécutant la commande suivante:
```
ng update @angular/core@14 @angular/cli@14 --allow-dirty --force
```
Ajoutez la dépendance, @messageformat/core avec la version 3.1.0 en exécutant la commande suivante:
```
yarn add -W @messageformat/core@3.1.0
```
Mettez à jour la dépendance single-spa-angular vers la version 7.1.0 en exécutant la commande suivante:
```
yarn upgrade single-spa-angular@7.1.0
```
Mettez à jour devDependency, @angular-builders/custom-webpack vers la version 14.1.0 en exécutant la commande suivante:
```
yarn upgrade @angular-builders/custom-webpack@14.1.0 --dev
```
Téléchargez et installez la version node.js 16.4.0.
1. Dans la variable d'environnement PATH, mettez à jour /path/to/nodejs-16.14.0/bin.
2. Vérifiez la version du noeud en exécutant la commande suivante:
```
node -v
```
Installez yarn version 1.22.5 globalement en exécutant la commande suivante:
```
npm install --global yarn
```
Installez Lerna en tant que module global en exécutant la commande suivante:
```
npm install -g lerna@4.0.0
```

Créez le fichier test.ts suivant et copiez le fichier dans extensions/features/override-component/src/. Le fichier test.ts est important pour que le script de mise à niveau angulaire s'exécute correctement.

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

Remplacez devDependencies la bibliothèque de styles présente dans /extensions/libs/styles/package.json et /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"
  },

Supprimez le fichier yarn.lock présent dans store-frontend-src.
Installez devDependencies en exécutant la commande suivante:
```
yarn bootstrap
```
Mettez à niveau Angular core et cli vers la version 15 en exécutant la commande suivante:
```
ng update @angular/core@15 @angular/cli@15 --allow-dirty --force
```
Mettez à jour les dépendances suivantes en exécutant la commande correspondante.
- Mettez à jour ngx-translate-messageformat-compiler vers 6.2.0 en exécutant la commande suivante:
```
yarn upgrade ngx-translate-messageformat-compiler@6.2.0
```
- Mettez à jour single-spa-angular vers 8.1.0 en exécutant la commande suivante:
```
yarn upgrade single-spa-angular@8.1.0
```
- Mettez à jour @carbon/chartsvers 1.7.6 en exécutant la commande suivante:
```
yarn upgrade @carbon/charts@1.7.6
```
- Mettez à jour @carbon/charts-angular vers 1.7.6 en exécutant la commande suivante:
```
yarn upgrade @carbon/charts-angular@1.7.6
```
Mettez à jour devDependency et @angular-builders/custom-webpack vers la version 15.0.0 en exécutant la commande suivante:
```
yarn upgrade @angular-builders/custom-webpack@15.0.0 --dev
```
Démarrez l'application en exécutant la commande suivante et vérifiez que les écrans personnalisés fonctionnent correctement.
```
yarn start-app
```
Lorsque vous exécutez cette commande, si vous voyez des erreurs liées aux vérifications de type, corrigez le code d'extension pour définir les types appropriés pour les variables.
La commande build-app:extension présente dans package.json de toutes les applications étendues doit être modifiée pour prendre en compte l'argument de configuration. Par exemple, "build-app:extension": "ng build override-component --prod" doit être remplacé par "build-app:extension": "ng build override-component --configuration production"
Configurez un nouvel espace de travail à partir de 23.2.6.0-10.0.2306.0 DTK.
1. Copier angular.json de l'espace de travail précédent vers le nouvel espace de travail.
2. Copiez les extensions migrées de l'espace de travail précédent dans le nouvel espace de travail.
3. Réexécutez les commandes suivantes pour tester les extensions.
```
yarn bootstrap
```
```
yarn start-app
```
Remarque :
- Copiez ou remplacez le contenu de src/app/app.component.ts des applications override-component et override-modals sur extensions/features/override-component et extensions/features/override-modals à partir de la dernière version de DTK.
- La version 13 d'Angular n'étant plus prise en charge, vous devez mettre à niveau les personnalisations de l'interface utilisateur vers la version Angular la plus récente ou prise en charge. Pour plus d'informations, voir Angular versioning and releases.
- Si vous ne pouvez pas migrer vers Angular version 15, mais que vous souhaitez modifier vos extensions dans Angular 13, vous pouvez continuer à générer vos personnalisations avec les DTK 23.1.3.1-10.0.2303.2 précédents. Pour obtenir les fonctions, les améliorations et les correctifs les plus récents, vous devez effectuer une mise à niveau vers Angular version 15.