Upgrade auf Angular 11

Bevor Sie das neueste Developer Toolkit herunterladen, müssen Sie ein Upgrade auf Angular 11 durchführen, um sicherzustellen, dass Ihre Anpassungen mit der neuen Umgebung kompatibel sind.

Vorbemerkungen

Stellen Sie sicher, dass Sie die folgenden Voraussetzungen erfüllen, um Sterling Store Engagement erfolgreich zu erweitern.

Aktualisieren Sie auf die unterstützte Angular-Version, um sicherzustellen, dass Ihre Anpassungen mit der neuen Umgebung kompatibel sind. Weitere Informationen zum Upgrade auf Angular 11 finden Sie unter Upgrade auf Angular 11.
Bevor Sie benutzerdefinierte Erweiterungen für Ihr Sterling Store Engagement erstellen, müssen Sie die Entwickler-Toolkit-Umgebung zum Erstellen und Testen der Erweiterungen einrichten. Weitere Informationen zum Herunterladen, Extrahieren und Einrichten des Entwickler-Toolkits finden Sie unter Einrichten der Entwickler-Toolkit-Umgebung.
Stellen Sie sicher, dass Sie alle Anpassungen in der Developer Toolkit-Umgebung vornehmen.
Stellen Sie sicher, dass die Anwendung Sterling Store Engagement bereitgestellt wird.

Informationen zu diesem Vorgang

Ihre Umgebungen werden aktualisiert, wenn Sie das neueste Entwicklertoolkit herunterladen und einrichten. Um sicherzustellen, dass Ihre Anpassungen mit dieser neuen Umgebung kompatibel sind, führen Sie die folgenden Schritte aus, um ein Upgrade auf Angular 11 zusammen mit den zugehörigen Bibliotheksabhängigkeiten wie Bootstrap durchzuführen.

Vorgehensweise

Führen Sie die folgenden Befehle aus Ihrem Arbeitsbereich aus:

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

Aktualisieren Sie die Anpassungspakete, indem Sie die ngb-tabset -Anpassung, die in ng-bootstrap 8 veraltet ist, durch die neue ngb-navbar -Anpassung ersetzen.

Alte ngb-tabset -Anpassung:

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

Neue ngb-navbar -Anpassung:

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

Hinweis: Bei ngb-datepickerwird das Ereignis select auf dateSelectaktualisiert.