Angular 11 へのアップグレード

最新のデベロッパーズ・ツールキットをダウンロードする前に、Angular 11 にアップグレードして、カスタマイズが新しい環境と互換性があることを確認する必要があります。

始める前に

Sterling Store Engagement を正常に拡張するために、以下の前提条件を満たしていることを確認してください。

サポートされている Angular バージョンにアップグレードして、カスタマイズが新しい環境と互換性があることを確認してください。 Angular 11へのアップグレードの詳細については、 Angular 11へのアップグレードをご覧ください。
Sterling Store Engagement 用のカスタム拡張機能を作成する前に、拡張機能を作成しテストするための開発者ツールキット環境をセットアップする必要があります。開発者ツールキットのダウンロード、解凍、セットアップの詳細については、開発者ツールキット環境のセットアップを参照してください。
デベロッパーズ・ツールキット環境では、必ずすべてのカスタマイズを実行してください。
Sterling Store Engagement アプリケーションが配備されていることを確認する。

このタスクについて

ご使用の環境は、最新のデベロッパーズ・ツールキットをダウンロードしてセットアップすると更新されます。カスタマイズがこの新しい環境と互換性を持つようにするには、以下のステップを実行して、ブートストラップなどのライブラリー依存関係とともに Angular 11 にアップグレードします。

手順

ワークスペースから以下のコマンドを実行します。

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

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に更新されます。