Angular 11로 업그레이드

최신 개발자 툴킷을 다운로드하기 전에 Anangular 11로 업그레이드하여 사용자 정의가 새 환경과 호환 가능한지 확인해야 합니다.

시작하기 전에

Sterling Store Engagement 성공적으로 확장하려면 다음 전제 조건을 완료해야 합니다.

지원되는 Anangular 버전으로 업그레이드하여 사용자 정의가 새 환경과 호환 가능한지 확인하십시오. Angular 11로 업그레이드하는 방법에 대한 자세한 내용은 Angular 11로 업그레이드하기를 참조하십시오.
스털링 Store Engagement 에 대한 사용자 지정 확장 프로그램을 만들기 전에 확장 프로그램을 만들고 테스트하기 위한 개발자 툴킷 환경을 설정해야 합니다. 개발자 도구 키트 다운로드, 압축 풀기 및 설정에 대한 자세한 내용은 개발자 도구 키트 환경 설정하기를 참조하세요.
개발자 툴킷 환경에서 모든 사용자 정의를 수행하는지 확인하십시오.
Sterling Store Engagement 애플리케이션이 배포되었는지 확인합니다.

태스크 정보

최신 개발자 툴킷을 다운로드하고 설정하면 환경이 업데이트됩니다. 사용자 정의가 이 새 환경과 호환 가능한지 확인하려면 다음 단계를 수행하여 부트스트랩과 같은 라이브러리 종속 항목과 함께 Anangular 11로 업그레이드하십시오.

프로시저

작업공간에서 다음 명령을 실행하십시오.

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

ng-bootstrap 8 에서 더 이상 사용되지 않는 ngb-tabset 사용자 정의를 새 ngb-navbar 사용자 정의로 대체하여 사용자 정의 패키지를 업그레이드하십시오.

이전 ngb-tabset 사용자 정의:

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

새 ngb-navbar 사용자 정의:

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

참고: ngb-datepicker의 경우 select 이벤트가 dateSelect로 업데이트됩니다.