Upgrading to Angular 11

Before you download the latest developer toolkit, you must upgrade to Angular 11 to ensure that your customizations are compatible with the new environment.

Before you begin

Ensure that you complete the following prerequisites to successfully extend Sterling Store Engagement.

Upgrade to the supported Angular version to ensure that your customizations are compatible with the new environment. For more information about upgrading to Angular 11 , see Upgrading to Angular 11.
Before you create custom extensions for your Sterling Store Engagement, you must set up the developer toolkit environment for creating and testing the extensions. For more information about downloading, extracting, and setting up the developer toolkit, see Set up the developer toolkit environment.
Ensure that you perform all your customizations in the developer toolkit environment.
Ensure that the Sterling Store Engagement application is deployed.

About this task

Your environments are updated when you download and set up the latest developer toolkit. To ensure that your customizations are compatible with this new environment, perform the following steps to upgrade to Angular 11 along with its library dependencies such as Bootstrap.

Procedure

Run the following commands from your workspace:

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

Upgrade the customization packages by replacing the ngb-tabset customization that is deprecated in ng-bootstrap 8 with the new ngb-navbar customization.

Old ngb-tabset customization:

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

New ngb-navbar customization:

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

Note: For ngb-datepicker, the select event is updated to dateSelect.