Upgrade auf Angular Version 20

Online bearbeiten

Sterling Store Engagement wurde auf Angular Version 20 aktualisiert. Stellen Sie sicher, dass Sie Ihre Erweiterungen auf Angular Version 20 migrieren.

Vorbemerkungen

Hinweis: Wenn Sie nicht auf Angular Version 20 migrieren können, Ihre Erweiterungen aber in Angular Version 18 anpassen möchten, können Sie Ihre Anpassungen weiterhin mit dem Entwickler-Toolkit „ 26.1.1.2 “ ( 10.0.2601.2 ) erstellen. Um die neuesten Funktionen, Verbesserungen und Fehlerbehebungen zu erhalten, müssen Sie auf Angular Version 20 aktualisieren.

Sie benötigen einen Angular-Arbeitsbereich der Version 18 von 26.1.1.2 – 10.0.2601.2 oder ein beliebiges Angular-Entwickler-Toolkit der Version 18.
Stellen Sie sicher, dass Sie die Version 24.13.0 von Node.js verwenden.

Informationen zu diesem Vorgang

Der Migrationsprozess umfasst zwei Schritte.

Aktualisierung von Angular Version 18 auf 19.
Aktualisieren Sie von Version 19 auf Version 20.

Hinweis: Stellen Sie sicher, dass Sie alle Befehle aus <WORKSPACE>/store-frontend-src dem Ordner ausführen.

Vorgehensweise

Führen Sie den folgenden Befehl aus, um Angular und die zugehörigen Pakete auf Version 19 zu aktualisieren:

ng update @angular/core@19 @angular/cli@19 @angular-builders/custom-webpack@19 @angular-devkit/schematics-cli@19 @angular-eslint/builder@19 @angular-eslint/eslint-plugin@19 @angular-eslint/eslint-plugin-template@19 @angular-eslint/schematics@19 @angular-eslint/template-parser@19 --force

Wenn Sie zur optionalen Migration aufgefordert werden, drücken Sie die Leertaste, um die optionalen Migrationen zu deaktivieren. Drücken Sie dann die Eingabetaste, um fortzufahren.
Wenn die zweite Eingabeaufforderung für die APP_INITIALIZER Migration erscheint, drücken Sie die Leertaste, um sie auszuwählen. Es ist standardmäßig nicht ausgewählt. Drücken Sie anschließend die Eingabetaste, um die Migration zu starten.
Durch APP_INITIALIZER die Migration wird ein zusätzlicher Injektor hinzugefügt, der entfernt werden muss. Suchen Sie in allen app.module.ts Dateien Ihrer Erweiterungen nach einem provideAppInitializer zusätzlichen LocalizationService Injector und entfernen Sie diesen.
Siehe den folgenden bestehenden Code:
```
const initializerFn = (LocalizationService.initializeTranslations)(
  inject(TranslateService), 
  inject(Injector), 
  inject(LocalizationService)
);
```
Siehe den folgenden neuen Code:
```
const initializerFn = (LocalizationService.initializeTranslations)(
  inject(TranslateService), 
  inject(Injector)
);
```
Wenn die folgenden Dateien erweitert werden, nehmen Sie diese Änderungen vor:
1. Erste Datei: packages/libs/functional-components/src/lib/components/payment-method/credit-card/credit-card.component.ts.
  In der getBillingAddress Methode wird der vorhandene Code wie folgt dargestellt:
```
return { ...this.personInfoBillToForCC } || {};
```
  Siehe den folgenden neuen Code:
```
return this.personInfoBillToForCC ? { ...this.personInfoBillToForCC } : {};
```
2. Zweite Datei: packages/features/returns/src/app/features/returns/return-capture-wizard-page/return-list-page/exchange-line-list/exchange-line-list.component.ts.
  Siehe den folgenden bestehenden Code:
```
this.orderLineList = { ...res?.Order?.OrderLines } || [];
```
  Siehe den folgenden neuen Code:
```
this.orderLineList = res?.Order?.OrderLines ? { ...res?.Order?.OrderLines } : {};
```

Führen Sie den folgenden Befehl aus, um Angular und die zugehörigen Pakete auf Version 20 zu aktualisieren:

ng update @angular/core@20 @angular/cli@20 @angular-builders/custom-webpack@20 @angular-devkit/schematics-cli@20 @angular-eslint/builder@20 @angular-eslint/eslint-plugin@20 @angular-eslint/eslint-plugin-template@20 @angular-eslint/schematics@20 @angular-eslint/template-parser@20 --force

Drücken Sie die Leertaste, um die optionalen Migrationen zu überspringen, wenn Sie dazu aufgefordert werden, und drücken Sie die Eingabetaste, um fortzufahren.
Es erscheint eine zweite Eingabeaufforderung mit weiteren optionalen Migrationen. Drücke A, um alle Migrationen auszuwählen, und drücke die Eingabetaste, um fortzufahren.
Wenn die folgenden Dateien erweitert werden, nehmen Sie die aufgeführten Änderungen vor:
1. Erste Datei: packages/features/dashboard/src/app/features/dashboard/dashboard-page/order-tasks-chart/order-tasks-chart.component.html
  Siehe den folgenden bestehenden Code:
```
@for (task of taskData let i=index; track task)
```
  Siehe den folgenden neuen Code:
```
@for (task of taskData; track task; let i=$index)
```
2. Zweite Datei: packages/features/pack-order/src/app/features/pack-order/pack-order-list-page/transfer-order/transfer-order.component.html
  Siehe den folgenden bestehenden Code:
```
@for (shipment of shipmentList let i = index; track shipment)
```
  Siehe den folgenden neuen Code:
```
@for (shipment of shipmentList; track shipment; let i = $index)
```
Aktualisieren Sie in jeder Erweiterung die ngx-translate-Konfiguration in der app.module.ts Datei.
Siehe den folgenden bestehenden Code:
```
this.translate.setDefaultLang('en');
```
Siehe den folgenden neuen Code:
```
this.translate.setFallbackLang('en');
```
Gehen Sie im neuesten Entwickler-Toolkit unter 26.2.4.0 – 10.0.2604.0 zum Verzeichnis extensions/libs/styles und kopieren Sie die package.json Datei in Ihren Erweiterungsordner.
Richten Sie einen neuen Arbeitsbereich mit dem neuesten Entwickler-Toolkit ein: 26.2.4.0 - 10.0.2604.0. Führen Sie dazu die folgenden Schritte aus:
1. Kopieren Sie die migrierten Erweiterungen aus dem bisherigen Arbeitsbereich in den neuen Arbeitsbereich.
2. Führen Sie den folgenden Befehl unter Verwendung eines absoluten Pfads erneut aus, um die Erweiterungen zu testen:
```
yarn bootstrap
```
3. Die aus dem von der Anwendung bereitgestellten Code stammenden Änderungen mit den Erweiterungen zusammenführen. Dadurch wird sichergestellt, dass Sie die aktuellste Version des Codes verwenden, und es werden Kompilierungsfehler vermieden.
4. Beachten Sie die folgenden Schritte, während Sie Ihre Änderungen zusammenführen.
ng-bootstrap v19 führt grundlegende Änderungen ein, die sich auf die Positionierung von Popovers auswirken. Falls die Klassen aus der aufgeführten Dateiliste überschrieben werden, nehmen Sie bitte folgende Änderungen vor:
1. Datei A: packages/features/receive-inventory/src/app/features/receive-inventory/shipment-list-page/modals/receiving-filter/receiving-filter.component.html. Suchen Sie das Element „ ngbPopover “ und ändern Sie das Attribut „placement“.
  Siehe den folgenden bestehenden Code:
```
<button ... [ngbPopover]="..." placement="bottom">
```
  Siehe den folgenden neuen Code:
```
<button ... [ngbPopover]="..." placement="bottom-end">
```
2. Datei B: packages/features/receive-inventory/src/app/features/receive-inventory/shipment-list-page/modals/receiving-filter/receiving-filter.component.scss.
  Wenn die .isf-receiving-filter Klasse in dieser Datei überschrieben wird, nehmen Sie bitte folgende Änderungen vor:
  - Entfernen Sie den folgenden Block vollständig.
    .popover.bs-popover-bottom div.popover-arrow { left: 57%; }
  - Entferne den „margin-left“ aus „arrow::after“.
    .popover.bs-popover-bottom div.popover-arrow::after { border-bottom-color: $blue; /* Remove: margin-left: 140px; */ }
  - Fügen Sie die mobile Responsivität hinzu.
    @include media-breakpoint-down(sm) { ngb-popover-window { display: none !important; } }
  - Ändere den CSS-Selektor von .popover.bs-popover-bottom in .popover.bs-popover-bottom-end.
    .popover.bs-popover-bottom-end div.popover-arrow::after { border-bottom-color: $blue; }
3. Datei C: packages/libs/common-components/src/lib/components/filter-placeholder/filter-placeholder.component.scss.
  Wenn die .isf-filter-placeholder Klasse in dieser Datei überschrieben wird, nehmen Sie bitte folgende Änderungen vor:
  - Entfernen Sie den folgenden Block vollständig.
```
.popover.bs-popover-bottom div.popover-arrow {
    left: 57%; 
}
```
  - Entferne den „margin-left“ aus „arrow::after“.
```
.popover.bs-popover-bottom div.popover-arrow::after {
    border-bottom-color: $blue;
    /* Remove: margin-left: 140px; */
}
```
4. Datei D: packages/libs/styles/src/styles/utilities/_override.scss.
  Wenn die .isf-sort ngb-popover-window Klasse in dieser Datei überschrieben wird, entfernen Sie Folgendes:
```
position: absolute;
left: -100px !important;

&.bs-popover-bottom .popover-arrow::before,
&.bs-popover-bottom .popover-arrow::after {
    right: -100px;
}
```
  Wenn die .isf-filter ngb-popover-window Klasse in dieser Datei überschrieben wird, entfernen Sie Folgendes:
```
position: absolute;
left: -95px !important;

&.bs-popover-bottom .popover-arrow::before,
&.bs-popover-bottom .popover-arrow::after {
    right: -95px;
}

@include media-breakpoint-down(lg) {
    left: -120px !important;
    
    &.bs-popover-bottom .popover-arrow::before,
    &.bs-popover-bottom .popover-arrow::after {
        right: -120px;
    }
}
```
  Wenn die .isf-filter Klasse in dieser Datei überschrieben wird, entfernen Sie Folgendes:
```
.popover.bs-popover-bottom div.popover-arrow {
    left: 88%; 
    @include media-breakpoint-down(lg) {
        left: 93%; 
    } 
}
```
  Wenn die .isf-related-task ngb-popover-window Klasse in dieser Datei überschrieben wird, entfernen Sie Folgendes:
```
/* Change from: left: -84px !important; */
/* Change to: */
left: -28px !important;

&.bs-popover-bottom .popover-arrow::before,
&.bs-popover-bottom .popover-arrow::after {
    top: 1px;
    /* Change from: right: -77px; */
    /* Change to: */
    right: -21.5px;
}

@include media-breakpoint-down(lg) {
    /* Change from: left: -84px !important; */
    /* Change to: */
    left: -28px !important;
}
 
```
  Wenn die .isf-to-details-for-pr ngb-popover-window Klasse in dieser Datei überschrieben wird, entfernen Sie Folgendes:
```
top: -13px !important; 
left: 0px !important;
```
  Wenn die .isf-receiving-filter ngb-popover-window Klasse in dieser Datei überschrieben wird, entfernen Sie Folgendes:
```
left: -155px !important;
```
  Wenn die .isf-filter-placeholder ngb-popover-window Klasse in dieser Datei überschrieben wird, entfernen Sie Folgendes:
```
left: -155px !important;
```
Führen Sie den folgenden Befehl aus, um die Anwendung zum Testen dieses Upgrades zu starten:
```
yarn start-app
```

Hinweis: Wenn Sie oder qa cloud als Remote-Server für dev Entwicklungszwecke verwenden, müssen Sie die unter „Konfiguration des lokalen Entwicklungsservers“ beschriebenen Änderungen vornehmen.