Mise à niveau vers Angular 11

Avant de télécharger le dernier kit d'outils de développement, vous devez effectuer une mise à niveau vers Angular 11 pour vous assurer que vos personnalisations sont compatibles avec le nouvel environnement.

Avant de commencer

Veillez à ce que les conditions suivantes soient remplies pour étendre avec succès Sterling Store Engagement.

Effectuez une mise à niveau vers la version Angular prise en charge pour vous assurer que vos personnalisations sont compatibles avec le nouvel environnement. Pour plus d'informations sur la mise à jour vers Angular 11, voir Mise à jour vers Angular 11.
Avant de créer des extensions personnalisées pour votre Sterling Store Engagement, vous devez configurer l'environnement de la boîte à outils du développeur pour créer et tester les extensions. Pour plus d'informations sur le téléchargement, l'extraction et la configuration du kit de développement, voir Configuration de l'environnement du kit de développement.
Veillez à effectuer toutes vos personnalisations dans l'environnement du kit d'outils de développement.
Assurez-vous que l'application Sterling Store Engagement est déployée.

A propos de cette tâche

Vos environnements sont mis à jour lorsque vous téléchargez et configurez le dernier kit d'outils de développement. Pour vous assurer que vos personnalisations sont compatibles avec ce nouvel environnement, procédez comme suit pour effectuer une mise à niveau vers Angular 11 avec ses dépendances de bibliothèque telles que Bootstrap.

Procédure

Exécutez les commandes suivantes à partir de votre espace de travail:

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

Mettez à niveau les packages de personnalisation en remplaçant la personnalisation ngb-tabset obsolète dans ng-bootstrap 8 par la nouvelle personnalisation ngb-navbar .

Ancienne personnalisation 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>

Nouvelle personnalisation 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>

Remarque: pour ngb-datepicker, l'événement select est mis à jour vers dateSelect.