Actualización a la versión 18 de Angular

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

Antes de empezar

Nota: Si no puedes migrar a la versión 18 de Angular, pero quieres modificar tus extensiones en la versión 15 de Angular, puedes seguir creando tus personalizaciones con el kit de herramientas para desarrolladores 24.3.9.2-10.0.2409.2. Para obtener las funciones, mejoras y correcciones más recientes, debes actualizar a la versión 18 de Angular.

Debes tener el espacio de trabajo de Angular versión 15 desde 24.3.9.2-10.0.2409.2 o cualquier kit de herramientas para desarrolladores de Angular versión 15.
Asegúrese de que está en node.js versión 18.20.0.

Acerca de esta tarea

El proceso de migración consta de tres pasos. Primero, actualice de la versión 15 a la 16 de Angular, segundo, actualice de la versión 16 a la 17, y tercero, actualice de la versión 17 a la 18.

Nota : Asegúrese de ejecutar todos los comandos desde la carpeta <WORKSPACE>/store-frontend-src .

Procedimiento

Actualice node-sass a la versión 8.0.0 en los archivos packages/libs/styles/package.json y extensions/libs/styles/package.json , y ejecute uno de los siguientes comandos:
```
yarn bootstrap
```
Actualice el núcleo de Angular y la CLI a la versión 16 ejecutando el siguiente comando:
```
ng update @angular/core@16 @angular/cli@16 --allow-dirty --force
```
Actualice el núcleo de Angular y la CLI a la versión 17 ejecutando el siguiente comando:
```
ng update @angular/core@17 @angular/cli@17 --allow-dirty --force
```
Actualice el núcleo de Angular y la CLI a la versión 18 ejecutando el siguiente comando:
```
ng update @angular/core@18 @angular/cli@18 --allow-dirty --force
```
Nota : Cuando ejecute este comando, se encontrará con una migración opcional para utilizar el generador de aplicaciones use-application-builder. Pulse Intro para continuar

Busque y sustituya el código existente por el nuevo en todos los métodos constructores de app.component.ts dentro del directorio de extensión. Si no aparece este fragmento de código, vaya al paso 6.

El siguiente código ilustra el código existente:

this.router.events.subscribe((event: RouterEvent) => {
    this.routingStateService.navigationInterceptor(event);
});

El siguiente código ilustra el nuevo código:

this.router.events.pipe(
    filter((event: Event | RouterEvent): event is RouterEvent => event instanceof RouterEvent)
).subscribe((event: RouterEvent) => {
    this.routingStateService.navigationInterceptor(event);
});

A continuación, importe Event desde @angular/router y filter desde rxjs/operators.

import { filter, take } from 'rxjs/operators';
import { Router, RouterEvent, Event } from '@angular/router';

extended packages/libs/common-components/src/lib/components/donut-chart/donut-chart.component.tsSi tiene un archivo donut-chart.component.ts , busque y reemplace el código existente por el nuevo código en el archivo.
El siguiente código ilustra el código existente:
```
const pie = d3.pie().value((d) => d.count).sort(null);
```
El siguiente código ilustra el nuevo código:
```
const pie = d3.pie().value((d) => d?.['count']).sort(null);
```
En el archivo angular.json , busque browserTarget y sustitúyalo por buildTarget.
En el kit de herramientas para desarrolladores más reciente 25.1.3.0-10.0.2503.0, navegue hasta el directorio extensions/libs/styles y copie los archivos package.json y webpack.config.js en su carpeta de extensiones.

Configure un nuevo espacio de trabajo a partir del kit de herramientas para desarrolladores más reciente 25.1.3.0-10.0.2503.0 completando los pasos que se indican a continuación.

Copie el archivo angular.json del espacio de trabajo anterior al nuevo espacio de trabajo.
Copie las extensiones migradas del espacio de trabajo anterior al nuevo.
Vuelva a ejecutar los siguientes comandos para probar las extensiones:
```
yarn bootstrap
```
```
ln -s <store-temp>/store-cli/schematics/node_modules <store-temp>/store-cli/node_modules
```
Asegúrese de que utiliza la ruta absoluta mientras ejecuta el comando anterior.
Fusione los cambios entrantes del código proporcionado por la aplicación con las extensiones para asegurarse de que está en la versión más reciente del código y evitar errores de compilación.

Tenga en cuenta el siguiente conjunto de pasos mientras fusiona sus cambios.

Con la versión más reciente de RxJS, TypeScript muestra un mensaje de error, si no se proporciona el argumento para el método siguiente. Si no desea pasar un argumento, declare el asunto con un tipo void . Alternativamente, si el sujeto está emitiendo valores desde otra fuente e integrado por observadores, pero no desea enviar ningún valor desde una fuente, pase null como argumento al método next . El siguiente código ilustra el código existente:
```
public addToCartSubject = new Subject<any>();
this.refreshParentComponent.next();
```
El siguiente código ilustra el nuevo código:
```
public addToCartSubject = new Subject<void>();
this.refreshParentComponent.next(null);
```

ngbAccordion se cambia de component a directive en la versión 16.0.0 de ng-bootstrap. Siga el ejemplo siguiente para asegurarse de que todas las apariciones de ngbAccordion en las extensiones se actualizan a directive.

Cambie el código del acordeón en el archivo component.html como se ilustra en el siguiente ejemplo. El siguiente código ilustra el código antiguo:

<ngb-accordion #acc="ngbAccordion" activeIds="{{activeIds}}"
                       [attr.tid]="componentId+'filterStatus'">
                       <ngb-panel id="ngb-panel-assignto">
                           <ng-template ngbPanelTitle>
                               <span
                                   [ngClass]="{' app-icon-open-chevron_down_14': isOpen(acc, 'ngb-panel-assignto'), 'app-icon-collapsed-chevron_right_14': !isOpen(acc, 'ngb-panel-assignto') }"
                                   class="app-glyphicons"></span>
                               <span translate> filterOptions.LABEL_FilterGroupDisplayValueAssignTo</span>
                           </ng-template>
                           <ng-template ngbPanelContent>
                               <isf-combo-box [attr.tid]="componentId+'filterAssignTo'"
                                   [searchText]="selectedUserName" [items]="userList" [columnName]="'name'"
                                   [selectedValues]="[selectedUserName]"
                                   [placeholder]="'filterOptions.LABEL_SelectAssociate'"
                                   [isItemSelected]="selectedUserName" (applySelection)="onSelection($event)"
                                   [resetValue]="resetComboBox"></isf-combo-box>
                           </ng-template>
                       </ngb-panel>
      </ngb-accordion>

El siguiente código ilustra el nuevo código:

<div ngbAccordion #acc="ngbAccordion"
                       [attr.tid]="componentId+'filterStatus'">
                       <div ngbAccordionItem="ngb-panel-assignto" id="ngb-panel-assignto" [collapsed]="!activeIds.includes('ngb-panel-assignto')">
                           <div ngbAccordionHeader>
                               <button ngbAccordionButton>
                                   <span
                                   [ngClass]="{' app-icon-open-chevron_down_14': isOpen(acc, 'ngb-panel-assignto'), 'app-icon-collapsed-chevron_right_14': !isOpen(acc, 'ngb-panel-assignto') }"
                                   class="app-glyphicons"></span>
                               <span translate> filterOptions.LABEL_FilterGroupDisplayValueAssignTo</span>
                               </button>
                           </div>
                           <div ngbAccordionCollapse>
                               <div ngbAccordionBody>
                                   <ng-template>
                                       <isf-combo-box [attr.tid]="componentId+'filterAssignTo'"
                                           [searchText]="selectedUserName" [items]="userList" [columnName]="'name'"
                                           [selectedValues]="[selectedUserName]"
                                           [placeholder]="'filterOptions.LABEL_SelectAssociate'"
                                           [isItemSelected]="selectedUserName" (applySelection)="onSelection($event)"
                                           [resetValue]="resetComboBox"></isf-combo-box>
                                   </ng-template>
                               </div>
                           </div>
                       </div>
 </div>

En el archivo component.ts , elimine la importación de NgbAccordion y añada NgbAccordionDirective desde @ng-bootstrap/ng-bootstrap.
```
import { NgbAccordionDirective } from '@ng-bootstrap/ng-bootstrap';
```

En el archivo component.ts , cambie la función isOpen como se muestra en el ejemplo de código siguiente.

public isOpen(acc: NgbAccordion, panelId: string) {
    return (acc.activeIds.includes(panelId));
  }

Cambiar como sigue:

public isOpen(acc: NgbAccordionDirective, panelId: string) {
  return acc.isExpanded(panelId)
}

El evento PanelChange se ha eliminado en el ngbootsrap más reciente. Proceda con los cambios que se mencionan a continuación:

Sustituya panelChange por show en el archivo component.html como se muestra en el siguiente ejemplo:
```
(panelChange)="setSelectedLocation($event)"
```
Sustitúyase por lo siguiente:
```
(show)="setSelectedLocation($event)"
```

En el archivo component.ts , cambie la función manejadora de eventos panelChange como se muestra en el siguiente ejemplo:

public setSelectedLocation(event: NgbPanelChangeEvent) {
    if (UIUtil.isNotVoid(event.nextState)) {
      if (UIUtil.isNotVoid(event.panelId)) {
        this.selectedLocationId = event.panelId;
        this._setDefaultAttributeSet(this.selectedLocationId);
      }
    } else {
      this.selectedLocationId = '';
    }
  }

Cambiar a

public setSelectedLocation(panelId: string) {
    if (UIUtil.isNotVoid(panelId)) {
        this.selectedLocationId = panelId;
        this._setDefaultAttributeSet(this.selectedLocationId);
    } else {
      this.selectedLocationId = '';
    }
  }

Si utiliza ngbDropdown en el bootstrap navbar, establezca el atributo display en dynamic como se muestra.
```
<div ngbDropdown display="dynamic"></div>
```

Inicie la aplicación ejecutando el siguiente comando:
```
yarn start-app
```
Nota: Si ejecuta el comando yarn start-app y se encuentra con el siguiente error, elimine la carpeta .angular del área de trabajo y vuelva a ejecutar el comando.
Module not found: Error: node_modules/@angular-devkit/build-angular/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js'

Nota: Si utiliza una instancia de dev o qa cloud como servidor remoto para fines de desarrollo, deberá realizar los cambios mencionados en Configuración del servidor de desarrollo local.