已停用新一代平台

升级到 Angular 11

在下载最新的开发者工具箱之前，必须升级到 Angular 11 ，以确保您的定制与新环境兼容。

开始之前

确保完成以下先决条件，以成功扩展 Sterling Store Engagement。

  • 升级到受支持的 Angular 版本，以确保您的定制与新环境兼容。 有关升级到 Angular 11 的更多信息，请参阅升级到 Angular 11。
  • 在为 Sterling Store Engagement 创建自定义扩展之前，必须设置用于创建和测试扩展的开发人员工具包环境。 有关下载、解压缩和设置开发者工具包的更多信息，请参阅设置开发者工具包环境。
  • 确保在开发者工具箱环境中执行所有定制。
  • 确保已部署 Sterling Store Engagement 应用程序。

关于此任务

下载并设置最新的开发者工具箱时，将更新您的环境。 要确保定制与此新环境兼容，请执行以下步骤以升级到 Angular 11 及其库依赖关系 (例如 Bootstrap)。

过程

  1. 从工作空间运行以下命令:
    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
  2. 通过将 ng-bootstrap 8 中不推荐使用的 ngb-tabset 定制替换为新的 ngb-navbar 定制来升级定制包。
    旧 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>
    新建 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>
    注: 对于 ngb-datepicker， select 事件将更新为 dateSelect。