앵귤러 버전 18로 업그레이드

yarn bootstrap

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

이 전에 명령을 실행하는 동안 절대 경로를 사용해야 합니다.

1. RxJS 의 최신 버전에서는 다음 메서드에 대한 인수가 제공되지 않으면 TypeScript 에 오류 메시지가 표시됩니다. 인수를 전달하지 않으려면 void 유형으로 제목을 선언하세요. 또는 피사체가 다른 소스에서 값을 방출하고 관찰자에 의해 통합되지만 한 소스에서 값을 보내지 않으려는 경우 next 메서드에 null 인자로 전달하세요. 다음 코드는 기존 코드를 보여줍니다:

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

   다음 코드는 새로운 코드를 보여줍니다:

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

2. ngbAccordion 은 16.0.0 버전에서 component 에서 directive 로 변경되었습니다. 이 후 예제에 따라 확장자에서 ngbAccordion 이 directive 으로 업그레이드되었는지 확인합니다.
   1. 다음 예시와 같이 component.html 파일에서 아코디언 코드를 변경합니다. 다음 코드는 이전 코드를 보여줍니다:

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

      다음 코드는 새로운 코드를 보여줍니다:

      <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. component.ts 파일에서 NgbAccordion 가져오기를 제거하고 @ng-bootstrap/ng-bootstrap 에서 NgbAccordionDirective 를 추가합니다.

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

   3. component.ts 파일에서 다음 코드 샘플에 표시된 대로 isOpen 함수를 변경합니다.

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

      다음과 같이 변경하십시오

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

   4. PanelChange 이벤트는 가장 최근의 ngbootsrap에서 제거되었습니다. 다음에 언급된 변경 사항을 진행합니다:
      1. 다음 예와 같이 component.html 파일에서 panelChange 을 show 으로 바꿉니다:

         (panelChange)="setSelectedLocation($event)"

         다음과 같이 바꾸십시오:

         (show)="setSelectedLocation($event)"

      2. component.ts 파일에서 다음 예시와 같이 panelChange 이벤트 핸들러 함수를 변경합니다:

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

         다음으로 변경

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

3. 부트스트랩의 navbar 에서 ngbDropdown 을 사용하는 경우 그림과 같이 display 속성을 dynamic 으로 설정합니다.

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