Mise à niveau vers la version 18 d'Angular

yarn bootstrap

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

Veillez à utiliser le chemin absolu lorsque vous exécutez la commande précédente.

1. Avec la version la plus récente de RxJS, TypeScript affiche un message d'erreur si l'argument de la méthode suivante n'est pas fourni. Si vous ne voulez pas passer d'argument, déclarez le sujet avec un type void . Par ailleurs, si le sujet émet des valeurs provenant d'une autre source et intégrées par les observateurs, mais que vous ne souhaitez pas envoyer de valeur provenant d'une source, passez null comme argument à la méthode next . Le code suivant illustre le code existant :

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

   Le code suivant illustre le nouveau code :

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

2. ngbAccordion passe de component à directive dans la version 16.0.0 de ng-bootstrap. Suivez l'exemple suivant pour vous assurer que toutes les occurrences de ngbAccordion dans les extensions sont mises à jour en directive.
   1. Modifiez le code de l'accordéon dans le fichier component.html comme illustré dans l'exemple suivant. Le code suivant illustre l'ancien 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>

      Le code suivant illustre le nouveau 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. Dans le fichier component.ts , supprimez l'importation de NgbAccordion et ajoutez NgbAccordionDirective à partir de @ng-bootstrap/ng-bootstrap.

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

   3. Dans le fichier component.ts , modifiez la fonction isOpen comme indiqué dans l'exemple de code suivant.

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

      Modifier comme suit :

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

   4. L'événement PanelChange a été supprimé dans la version la plus récente de ngbootsrap. Procédez aux changements mentionnés ci-dessous :
      1. Remplacez panelChange par show dans le fichier component.html comme indiqué dans l'exemple suivant :

         (panelChange)="setSelectedLocation($event)"

         Remplacer par :

         (show)="setSelectedLocation($event)"

      2. Dans le fichier component.ts , modifiez la fonction de gestion de l'événement panelChange comme indiqué dans l'exemple suivant :

         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 = '';
             }
           }

         Remplacer par

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

3. Si vous utilisez ngbDropdown dans le bootstrap navbar, définissez l'attribut display à dynamic comme indiqué.

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