Upgrade auf Angular Version 18

yarn bootstrap

ln -s <store-temp>/store-cli/schematics/node_modules <store-temp>/store-cli/node_modules

Stellen Sie sicher, dass Sie den absoluten Pfad verwenden, wenn Sie den Befehl davor ausführen.

1. In der neuesten Version von RxJS zeigt TypeScript eine Fehlermeldung an, wenn das Argument für die nächste Methode nicht angegeben wird. Wenn Sie kein Argument übergeben wollen, deklarieren Sie das Subjekt mit einem void Typ. Wenn das Subjekt Werte aus einer anderen Quelle aussendet und von Beobachtern integriert wird, Sie aber keinen Wert aus einer Quelle senden wollen, können Sie auch null als Argument an die Methode next übergeben. Der folgende Code veranschaulicht den vorhandenen Code:

   public addToCartSubject = new Subject<any>();
   this.refreshParentComponent.next();

   Der folgende Code veranschaulicht den neuen Code:

   public addToCartSubject = new Subject<void>();
   this.refreshParentComponent.next(null);

2. ngbAccordion wird in der Version 16.0.0 von ng-bootstrap von component auf directive geändert. Befolgen Sie das folgende Beispiel, um sicherzustellen, dass alle Vorkommen von ngbAccordion in Erweiterungen auf directive aktualisiert werden.
   1. Ändern Sie den Akkordeon-Code in der Datei component.html wie im folgenden Beispiel dargestellt. Der folgende Code veranschaulicht den alten Code:

      <ngb-accordion #acc="ngbAccordion" activeIds="{{activeIds}}"
                             [attr.tid]="componentId+'filterStatus'">
                             <ngb-panel id="ngb-panel-assignto">
                                 <ng-template ngbPanelTitle>
                                     <span
                                         [ngClass]="{' app-icon-open-chevron_down_14': isOpen(acc, 'ngb-panel-assignto'), 'app-icon-collapsed-chevron_right_14': !isOpen(acc, 'ngb-panel-assignto') }"
                                         class="app-glyphicons"></span>
                                     <span translate> filterOptions.LABEL_FilterGroupDisplayValueAssignTo</span>
                                 </ng-template>
                                 <ng-template ngbPanelContent>
                                     <isf-combo-box [attr.tid]="componentId+'filterAssignTo'"
                                         [searchText]="selectedUserName" [items]="userList" [columnName]="'name'"
                                         [selectedValues]="[selectedUserName]"
                                         [placeholder]="'filterOptions.LABEL_SelectAssociate'"
                                         [isItemSelected]="selectedUserName" (applySelection)="onSelection($event)"
                                         [resetValue]="resetComboBox"></isf-combo-box>
                                 </ng-template>
                             </ngb-panel>
            </ngb-accordion>

      Der folgende Code veranschaulicht den neuen Code:

      <div ngbAccordion #acc="ngbAccordion"
                             [attr.tid]="componentId+'filterStatus'">
                             <div ngbAccordionItem="ngb-panel-assignto" id="ngb-panel-assignto" [collapsed]="!activeIds.includes('ngb-panel-assignto')">
                                 <div ngbAccordionHeader>
                                     <button ngbAccordionButton>
                                         <span
                                         [ngClass]="{' app-icon-open-chevron_down_14': isOpen(acc, 'ngb-panel-assignto'), 'app-icon-collapsed-chevron_right_14': !isOpen(acc, 'ngb-panel-assignto') }"
                                         class="app-glyphicons"></span>
                                     <span translate> filterOptions.LABEL_FilterGroupDisplayValueAssignTo</span>
                                     </button>
                                 </div>
                                 <div ngbAccordionCollapse>
                                     <div ngbAccordionBody>
                                         <ng-template>
                                             <isf-combo-box [attr.tid]="componentId+'filterAssignTo'"
                                                 [searchText]="selectedUserName" [items]="userList" [columnName]="'name'"
                                                 [selectedValues]="[selectedUserName]"
                                                 [placeholder]="'filterOptions.LABEL_SelectAssociate'"
                                                 [isItemSelected]="selectedUserName" (applySelection)="onSelection($event)"
                                                 [resetValue]="resetComboBox"></isf-combo-box>
                                         </ng-template>
                                     </div>
                                 </div>
                             </div>
       </div>

   2. In der Datei component.ts entfernen Sie den Import von NgbAccordion und fügen NgbAccordionDirective aus @ng-bootstrap/ng-bootstrap hinzu.

      import { NgbAccordionDirective } from '@ng-bootstrap/ng-bootstrap';

   3. Ändern Sie in der Datei component.ts die Funktion isOpen wie im folgenden Codebeispiel gezeigt.

      public isOpen(acc: NgbAccordion, panelId: string) {
          return (acc.activeIds.includes(panelId));
        }

      Ändern Sie wie folgt:

      public isOpen(acc: NgbAccordionDirective, panelId: string) {
        return acc.isExpanded(panelId)
      }

   4. Das Ereignis PanelChange wird in der neuesten Version von ngbootsrap entfernt. Fahren Sie mit den nachfolgend genannten Änderungen fort:
      1. Ersetzen Sie panelChange durch show in der Datei component.html , wie im folgenden Beispiel gezeigt:

         (panelChange)="setSelectedLocation($event)"

         Ersetzen Sie wie folgt:

         (show)="setSelectedLocation($event)"

      2. Ändern Sie in der Datei component.ts die Funktion panelChange event handler wie im folgenden Beispiel gezeigt:

         public setSelectedLocation(event: NgbPanelChangeEvent) {
             if (UIUtil.isNotVoid(event.nextState)) {
               if (UIUtil.isNotVoid(event.panelId)) {
                 this.selectedLocationId = event.panelId;
                 this._setDefaultAttributeSet(this.selectedLocationId);
               }
             } else {
               this.selectedLocationId = '';
             }
           }

         Vorzunehmende Änderung

         public setSelectedLocation(panelId: string) {
             if (UIUtil.isNotVoid(panelId)) {
                 this.selectedLocationId = panelId;
                 this._setDefaultAttributeSet(this.selectedLocationId);
             } else {
               this.selectedLocationId = '';
             }
           }

3. Wenn Sie ngbDropdown in der Bootstrap-Datei navbar verwenden, setzen Sie das Attribut display wie gezeigt auf dynamic .

   <div ngbDropdown display="dynamic"></div>