Antes de descargar el kit de herramientas de desarrollador más reciente, debe actualizar a Angular 11 para asegurarse de que las personalizaciones son compatibles con el nuevo entorno.
Antes de empezar
Asegúrese de que completa los siguientes requisitos previos para ampliar correctamente Sterling Store Engagement.
- Actualice a la versión Angular soportada para asegurarse de que las personalizaciones son compatibles con el nuevo entorno. Para obtener más información sobre la actualización a Angular 11, consulte Actualización a Angular 11.
- Antes de crear extensiones personalizadas para su Sterling Store Engagement, debe configurar el entorno del kit de herramientas del desarrollador para crear y probar las extensiones. Para obtener más información sobre cómo descargar, extraer y configurar el kit de herramientas para desarrolladores, consulte Configurar el entorno del kit de herramientas para desarrolladores.
- Asegúrese de realizar todas las personalizaciones en el entorno del kit de herramientas del desarrollador.
- Asegúrese de que la aplicación Sterling Store Engagement está desplegada.
Acerca de esta tarea
Los entornos se actualizan al descargar y configurar el kit de herramientas de desarrollador más reciente. Para asegurarse de que las personalizaciones son compatibles con este nuevo entorno, realice los pasos siguientes para actualizar a Angular 11 junto con sus dependencias de biblioteca como, por ejemplo, Bootstrap.
Procedimiento
- Ejecute los mandatos siguientes desde el espacio de trabajo:
npm install -g @angular/cli@8.3.29
ng update @angular/core@8 @angular/cli@8 --allow-dirty
ng update @angular/core@9 @angular/cli@9 --allow-dirty
ng add @angular/localise
yarn add bootstrap@^4.5.3
yarn add @ng-bootstrap/ng-bootstrap^8.0.0
yarn add ngx-translate-messageformat-compiler@^4.8.0
ng update @angular/core@10 @angular/cli@10 --allow-dirty
yarn add codelyzer@^6.0.0
ng update @angular/core@11.0.5 @angular/cli@11.0.5 --allow-dirty
- Actualice los paquetes de personalización sustituyendo la personalización de
ngb-tabset que está en desuso en ng-bootstrap 8 por la nueva personalización de ngb-navbar .Personalización de ngb-tabset antigua:<ngb-tabset type="pills" (tabChange)="onTabChange($event)" [activeId]="activeTab">
<ngb-tab id="product">
<ng-template ngbTabTitle>
<div id="product" [attr.tid]="componentId+'ProductsTitle'">
<span translate
[translateParams]="{count: shipmentLinesModel.ShipmentLines.TotalNumberOfRecords}">shipmentSummary.TITLE_Products</span>
<span translate class="small font-weight-normal"
[translateParams]="{unit: shipmentLinesModel.ShipmentLines.units}">shipmentSummary.LABEL_Units</span>
</div>
</ng-template>
<ng-template ngbTabContent>
<isf-shipment-summary-products *ngIf="showShipmentLineList" [pickRequestModel]="pickRequestModel"
[data]="shipmentLinesModel.ShipmentLines.ShipmentLine" [visibleCount]="visibleCount">
</isf-shipment-summary-products>
</ng-template>
</ngb-tab>
<ngb-tab id="packages" *ngIf="containerDetails && containerDetails.TotalNumberOfRecords>0">
<ng-template ngbTabTitle>
<div id="packages" [attr.tid]="componentId+'PackagesTitle'">
<span translate
[translateParams]="{count: containerDetails.TotalNumberOfRecords}">shipmentSummary.TITLE_Packages</span>
</div>
</ng-template>
<ng-template ngbTabContent>
<isf-shipment-summary-packages *ngIf="showShipmentLineList" [packageList]="containerDetails"
[visibleCount]="visibleCount" (refreshPackage)="refreshSummaryDetails($event)"
[shipmentDetailsModel]="shipmentDetailsModel"></isf-shipment-summary-packages>
</ng-template>
</ngb-tab>
</ngb-tabset>
Nueva personalización de ngb-navbar :<ul ngbNav #shipmentSummaryPageTabSet="ngbNav" class="nav-pills pt-1 isf-font-size-14"
(navChange)="onTabChange($event)" [activeId]="activeTab">
<li [ngbNavItem]="'products'">
<a class="nav-link" ngbNavLink [attr.tid]="componentId+'ProductsTitle'">
<span translate
[translateParams]="{count: shipmentLinesModel.ShipmentLines.TotalNumberOfRecords}">shipmentSummary.TITLE_Products</span>
<span translate class="small font-weight-normal"
[translateParams]="{unit: shipmentLinesModel.ShipmentLines.units}">shipmentSummary.LABEL_Units</span>
</a>
<ng-template ngbNavContent>
<isf-shipment-summary-products *ngIf="showShipmentLineList" [pickRequestModel]="pickRequestModel"
[data]="shipmentLinesModel.ShipmentLines.ShipmentLine" [visibleCount]="visibleCount">
</isf-shipment-summary-products>
</ng-template>
</li>
<li *ngIf="containerDetails && containerDetails.TotalNumberOfRecords>0" [ngbNavItem]="'packages'">
<a class="nav-link" ngbNavLink [attr.tid]="componentId+'PackagesTitle'">
<span translate
[translateParams]="{count: containerDetails.TotalNumberOfRecords}">shipmentSummary.TITLE_Packages</span>
</a>
<ng-template ngbNavContent>
<isf-shipment-summary-packages *ngIf="showShipmentLineList" [packageList]="containerDetails"
[visibleCount]="visibleCount" (refreshPackage)="refreshSummaryDetails($event)"
[shipmentDetailsModel]="shipmentDetailsModel"></isf-shipment-summary-packages>
</ng-template>
</li>
</ul>
<div [ngbNavOutlet]="shipmentSummaryPageTabSet" id="navContent"></div>
Nota: Para ngb-datepicker, el suceso select se actualiza a dateSelect.
