Actualización a Angular versión 15

Sterling Store Engagement se actualiza a la versión 15 de Angular. Asegúrese de migrar las extensiones a Angular versión 15.

Antes de empezar

Debe tener el espacio de trabajo Angular versión 13 del DTK 23.1.3.2-10.0.2303.2 .
Asegúrese de que está en node.js versión 14.19.0.

Acerca de esta tarea

La actividad de migración es un proceso de dos pasos. En primer lugar, debe migrar de Angular versión 13 a 14 y, a continuación, migrar de la versión 14 a la 15.

Procedimiento

Ejecute todos los mandatos desde la carpeta <WORKSPACE>/store-frontend-src .

Actualice Angular core y cli a la versión 14 ejecutando el mandato siguiente:
```
ng update @angular/core@14 @angular/cli@14 --allow-dirty --force
```
Añada la dependencia, @messageformat/core con la versión 3.1.0 ejecutando el mandato siguiente:
```
yarn add -W @messageformat/core@3.1.0
```
Actualice la dependencia, single-spa-angular a la versión 7.1.0 ejecutando el mandato siguiente:
```
yarn upgrade single-spa-angular@7.1.0
```
Actualice devDependency, @angular-builders/custom-webpack a la versión 14.1.0 ejecutando el mandato siguiente:
```
yarn upgrade @angular-builders/custom-webpack@14.1.0 --dev
```
Descargue e instale la versión node.js 16.4.0.
1. En la variable de entorno PATH, actualice /path/to/nodejs-16.14.0/bin.
2. Verifique la versión del nodo ejecutando el mandato siguiente:
```
node -v
```
Instale la versión de yarn 1.22.5 de forma global ejecutando el mandato siguiente:
```
npm install --global yarn
```
Instale Lerna como un módulo global ejecutando el mandato siguiente:
```
npm install -g lerna@4.0.0
```

Cree el siguiente archivo test.ts y copie el archivo en extensions/features/override-component/src/. El archivo test.ts es importante para que el script de actualización angular se ejecute correctamente.

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

Sustituir devDependencies de la biblioteca de estilos que están presentes en /extensions/libs/styles/package.json y /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"
  },

Suprima el archivo yarn.lock que está presente en store-frontend-src.
Instale devDependencies ejecutando el mandato siguiente:
```
yarn bootstrap
```
Actualice Angular core y cli a la versión 15 ejecutando el mandato siguiente:
```
ng update @angular/core@15 @angular/cli@15 --allow-dirty --force
```
Actualice las dependencias siguientes ejecutando el mandato correspondiente.
- Actualice ngx-translate-messageformat-compiler a 6.2.0 ejecutando el mandato siguiente:
```
yarn upgrade ngx-translate-messageformat-compiler@6.2.0
```
- Actualice single-spa-angular a 8.1.0 ejecutando el mandato siguiente:
```
yarn upgrade single-spa-angular@8.1.0
```
- Actualice @carbon/chartsa 1.7.6 ejecutando el mandato siguiente:
```
yarn upgrade @carbon/charts@1.7.6
```
- Actualice @carbon/charts-angular a 1.7.6 ejecutando el mandato siguiente:
```
yarn upgrade @carbon/charts-angular@1.7.6
```
Actualice devDependency y @angular-builders/custom-webpack a la versión 15.0.0 ejecutando el mandato siguiente:
```
yarn upgrade @angular-builders/custom-webpack@15.0.0 --dev
```
Inicie la aplicación ejecutando el mandato siguiente y valide que las pantallas personalizadas funcionen correctamente.
```
yarn start-app
```
Cuando ejecute este mandato, si ve errores relacionados con comprobaciones de tipo, arregle el código de extensión para definir los tipos adecuados para las variables.
El mandato build-app:extension presente en package.json de todas las aplicaciones ampliadas debe modificarse para tener en cuenta el argumento de configuración. Por ejemplo, "build-app:extension": "ng build override-component --prod" debe cambiarse a "build-app:extension": "ng build override-component --configuration production"
Configurar un nuevo espacio de trabajo desde 23.2.6.0-10.0.2306.0 DTK.
1. Copiar angular.json del espacio de trabajo anterior en el nuevo espacio de trabajo.
2. Copie las extensiones migradas del espacio de trabajo anterior en el nuevo espacio de trabajo.
3. Vuelva a ejecutar los mandatos siguientes para probar extensiones.
```
yarn bootstrap
```
```
yarn start-app
```
Nota:
- Copie o sustituya el contenido de src/app/app.component.ts de las aplicaciones override-component y override-modals en extensions/features/override-component y extensions/features/override-modals desde el último DTK.
- Como la versión 13 de Angular ya no está soportada, debe actualizar las personalizaciones de la interfaz de usuario a la versión Angular más reciente o soportada. Para obtener más información, consulta Versionado y versiones de Angular.
- Si no puede migrar a Angular versión 15, pero desea modificar las extensiones en Angular 13, puede continuar creando sus personalizaciones con el DTK 23.1.3.1-10.0.2303.2 anterior. Para obtener las últimas características, mejoras y arreglos, debe actualizar a Angular versión 15.