Antes de fazer download do kit de ferramentas do desenvolvedor mais recente, deve-se fazer upgrade para Angular 11 para assegurar que suas customizações sejam compatíveis com o novo ambiente.
Antes de iniciar
Certifique-se de concluir os seguintes pré-requisitos para estender com êxito o Sterling Store Engagement.
- Faça upgrade para a versão Angular suportada para assegurar que suas customizações sejam compatíveis com o novo ambiente.. Para obter mais informações sobre a atualização para o Angular 11, consulte Atualização para o Angular 11.
- Antes de criar extensões personalizadas para o Sterling Store Engagement, você deve configurar o ambiente do kit de ferramentas do desenvolvedor para criar e testar as extensões. Para obter mais informações sobre o download, a extração e a configuração do kit de ferramentas do desenvolvedor, consulte Configurar o ambiente do kit de ferramentas do desenvolvedor.
- Assegure-se de executar todas as suas customizações no ambiente do kit de ferramentas do desenvolvedor.
- Certifique-se de que o aplicativo Sterling Store Engagement esteja implantado.
Sobre esta tarefa
Seus ambientes são atualizados ao fazer download e configurar o kit de ferramentas do desenvolvedor mais recente. Para assegurar que suas customizações sejam compatíveis com esse novo ambiente, execute as etapas a seguir para fazer upgrade para o Angular 11 juntamente com suas dependências de biblioteca, como Bootstrap
Procedimento
- Execute os comandos a seguir em sua área de trabalho:
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
- Faça upgrade dos pacotes de customização substituindo a customização
ngb-tabset que está descontinuada em ng-bootstrap 8 pela nova customização ngb-navbar .Customização antiga do ngb-tabset :<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>
Nova ngb-navbar customização:<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, o evento select é atualizado para dateSelect.
