Angular バージョン18へのアップグレード

Sterling Store Engagement、Angularバージョン18にアップグレード。拡張機能を Angular バージョン 18 に移行してください。

始める前に

注： Angularバージョン18に移行できないが、Angularバージョン15でエクステンションを修正したい場合、 24.3.9.2-10.0.2409.2 開発者ツールキットでカスタマイズを構築し続けることができます。最新の機能、拡張、修正を入手するには、Angularバージョン18にアップグレードする必要があります。

24.3.9.2-10.0.2409.2、またはAngularバージョン15の開発者ツールキットからAngularバージョン15のワークスペースを持っている必要があります。
node.js バージョン 18.20.0 を使用していることを確認してください。

このタスクについて

移行プロセスには3つのステップがあります。まず、Angularのバージョン15から16にアップグレードし、次にバージョン16から17にアップグレードし、最後にバージョン17から18にアップグレードします。

注： <WORKSPACE>/store-frontend-src フォルダ内のすべてのコマンドを実行してください。

手順

packages/libs/styles/package.json と extensions/libs/styles/package.json の両方のファイルで、node-sassをバージョン 8.0.0 に更新し、以下のコマンドのいずれかを実行します。
```
yarn bootstrap
```
次のコマンドを実行して、Angular core と CLI をバージョン 16 にアップグレードします。
```
ng update @angular/core@16 @angular/cli@16 --allow-dirty --force
```
次のコマンドを実行して、Angular core と CLI をバージョン 17 にアップグレードします。
```
ng update @angular/core@17 @angular/cli@17 --allow-dirty --force
```
次のコマンドを実行して、Angular core と CLI をバージョン 18 にアップグレードします。
```
ng update @angular/core@18 @angular/cli@18 --allow-dirty --force
```
注：このコマンドを実行すると、アプリケーションビルダーを使用するためのオプションの移行が発生します。 use-application-builder を入力し、エンターキーを押して次に進みます
拡張ディレクトリ内のすべての app.component.ts コンストラクタ・メソッドを検索し、既存のコードを新しいコードに置き換える。このコード・スニペットがない場合は、ステップ6に進む。
以下のコードは、既存のコードを示しています
```
this.router.events.subscribe((event: RouterEvent) => {
    this.routingStateService.navigationInterceptor(event);
});
```
次のコードは、新しいコードを示しています
```
this.router.events.pipe(
    filter((event: Event | RouterEvent): event is RouterEvent => event instanceof RouterEvent)
).subscribe((event: RouterEvent) => {
    this.routingStateService.navigationInterceptor(event);
});
```
次に、 Event を @angular/router から、 filter を rxjs/operators からインポートします。
```
import { filter, take } from 'rxjs/operators';
import { Router, RouterEvent, Event } from '@angular/router';
```
extended packages/libs/common-components/src/lib/components/donut-chart/donut-chart.component.ts をお持ちの場合は、 donut-chart.component.ts ファイル内の既存のコードを検索して新しいコードに置き換えてください。
以下のコードは、既存のコードを示しています
```
const pie = d3.pie().value((d) => d.count).sort(null);
```
次のコードは、新しいコードを示しています
```
const pie = d3.pie().value((d) => d?.['count']).sort(null);
```
angular.json ファイルで browserTarget を検索し、 buildTarget に置き換えます。
最新の開発者ツールキット 25.1.3.0-10.0.2503.0 で、 extensions/libs/styles ディレクトリをブラウズし、 package.json と webpack.config.js ファイルを拡張機能フォルダにコピーします。

最新の開発者ツールキット（ 25.1.3.0-10.0.2503.0 ）から新しいワークスペースをセットアップします。

angular.json ファイルを前のワークスペースから新しいワークスペースにコピーします。
移行した拡張機能を以前のワークスペースから新しいワークスペースにコピーします。
拡張機能をテストするために、以下のコマンドを再実行します。
```
yarn bootstrap
```
```
ln -s <store-temp>/store-cli/schematics/node_modules <store-temp>/store-cli/node_modules
```
このコマンドを実行する前に、絶対パスを使用していることを確認してください。
アプリケーションから提供されたコードからの変更をエクステンションにマージすることで、コードの最新バージョンを確認し、コンパイルエラーを回避する。

変更をマージしている間に、次の一連のステップを検討してください。

RxJS の最新バージョンでは、 TypeScript 、nextメソッドの引数が提供されない場合、エラーメッセージが表示される。引数を渡したくない場合は、 void 型で主語を宣言する。あるいは、主体が別のソースから値を発し、オブザーバーによって統合されるが、1つのソースから値を送信したくない場合は、 next メソッドの引数として null を渡す。以下のコードは、既存のコードを示しています
```
public addToCartSubject = new Subject<any>();
this.refreshParentComponent.next();
```
次のコードは、新しいコードを示しています
```
public addToCartSubject = new Subject<void>();
this.refreshParentComponent.next(null);
```

ngbAccordion は、ng-bootstrapのバージョンでからに変更されました。 16.0.0 component directive この後の例に従って、エクステンションの ngbAccordion がすべて directive にアップグレードされることを確認してください。

次の例のように、 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>

component.ts ファイルで、 NgbAccordion のインポートを削除し、 @ng-bootstrap/ng-bootstrap から NgbAccordionDirective を追加する。
```
import { NgbAccordionDirective } from '@ng-bootstrap/ng-bootstrap';
```

component.ts 、次のコード・サンプルに示すように、 isOpen 関数を変更する。

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

以下のように変更します

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

PanelChange イベントは最新の ngbootsrap で削除されている。以下に述べる変更を行う：

以下の例のように、 component.html ファイルの panelChange を show に置き換える：
```
(panelChange)="setSelectedLocation($event)"
```
以下のように置き換えてください
```
(show)="setSelectedLocation($event)"
```

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

ブートストラップの navbar で ngbDropdown を使用する場合は、図のように display 属性を dynamic に設定します。
```
<div ngbDropdown display="dynamic"></div>
```

以下のコマンドを実行してアプリケーションを起動する：
```
yarn start-app
```
注： yarn start-app コマンドを実行し、以下のエラーが発生した場合は、ワークスペースから .angular フォルダを削除し、コマンドを再実行してください。
Module not found: Error: node_modules/@angular-devkit/build-angular/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js'

注： dev または qa cloud インスタンスを開発用のリモート・サーバーとして使用する場合は、ローカル開発サーバーの構成に記載されている変更を行う必要があります。