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

Sterling Store Engagement、Angularバージョン15にアップグレード。拡張機能を必ず Angular バージョン 15 にマイグレーションしてください。

始める前に

23.1.3.2-10.0.2303.2 DTK からの Angular バージョン 13 ワークスペースが必要です。
node.js バージョン 14.19.0を使用していることを確認します。

このタスクについて

マイグレーション・アクティビティーは、2 ステップのプロセスです。まず、Angular バージョン 13 から 14 にマイグレーションしてから、バージョン 14 から 15 にマイグレーションする必要があります。

手順

<WORKSPACE>/store-frontend-src フォルダーからすべてのコマンドを実行します。

以下のコマンドを実行して、Angular core および cli をバージョン 14 にアップグレードします。
```
ng update @angular/core@14 @angular/cli@14 --allow-dirty --force
```
以下のコマンドを実行して、 @messageformat/core バージョン 3.1.0 の依存関係を追加します。
```
yarn add -W @messageformat/core@3.1.0
```
以下のコマンドを実行して、依存関係 single-spa-angular をバージョン 7.1.0 に更新します。
```
yarn upgrade single-spa-angular@7.1.0
```
次のコマンドを実行して、 devDependency @angular-builders/custom-webpack をバージョン 14.1.0 に更新します。
```
yarn upgrade @angular-builders/custom-webpack@14.1.0 --dev
```
node.js バージョンをダウンロードしてインストールする。 16.4.0.
1. PATH 環境変数で、 /path/to/nodejs-16.14.0/binを更新します。
2. 以下のコマンドを実行して、ノードのバージョンを確認します。
```
node -v
```
次のコマンドを実行して、yarn バージョン 1.22.5 をグローバルにインストールします。
```
npm install --global yarn
```
次のコマンドを実行して、 Lerna をグローバル・モジュールとしてインストールします。
```
npm install -g lerna@4.0.0
```

以下の test.ts ファイルを作成し、そのファイルを extensions/features/override-component/src/にコピーします。 test.ts ファイルは、角度アップグレード・スクリプトを正常に実行するために重要です。

/*******************************************************************************
* IBM Confidential
* IBM® Sterling Order Management System
Software (5737-D18)
* IBM Sterling Order Management System
Software (5725-D10)
* (C) Copyright IBM Corp. 2022
******************************************************************************/
// This file is required by karma.conf.js and loads recursively all the .spec and framework files

import 'zone.js/testing';
import { getTestBed } from '@angular/core/testing';
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';

// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting(), {
    teardown: { destroyAfterEach: false }
}
);

/extensions/libs/styles/package.json および /packages/libs/styles/package.jsonに存在するスタイル・ライブラリーの devDependencies を置換します。

"devDependencies": {
    "@ng-bootstrap/ng-bootstrap": "12.1.1",
    "autoprefixer": "^9.0.0",
    "breakpoint-sass": "^2.7.1",
    "css-loader": "^2.0.0",
    "cssnano": "^4.0.5",
    "file-loader": "^6.2.0",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^6.0.1",
    "postcss-loader": "^3.0.0",
    "resolve-url-loader": "^5.0.0",
    "sass-loader": "13.2.2",
    "style-loader": "^0.23.1",
    "url-loader": "^4.1.1",
    "webpack": "^5.51.1",
    "webpack-cli": "^4.9.2"
  },

store-frontend-srcにある yarn.lock ファイルを削除します。
次のコマンドを実行して、 devDependencies をインストールします。
```
yarn bootstrap
```
以下のコマンドを実行して、Angular core および cli をバージョン 15 にアップグレードします。
```
ng update @angular/core@15 @angular/cli@15 --allow-dirty --force
```
対応するコマンドを実行して、以下の依存関係を更新します。
- 以下のコマンドを実行して、 ngx-translate-messageformat-compiler を 6.2.0 に更新します。
```
yarn upgrade ngx-translate-messageformat-compiler@6.2.0
```
- 以下のコマンドを実行して、 single-spa-angular を 8.1.0 に更新します。
```
yarn upgrade single-spa-angular@8.1.0
```
- 以下のコマンドを実行して、 @carbon/chartsを 1.7.6 に更新します。
```
yarn upgrade @carbon/charts@1.7.6
```
- 以下のコマンドを実行して、 @carbon/charts-angular を 1.7.6 に更新します。
```
yarn upgrade @carbon/charts-angular@1.7.6
```
次のコマンドを実行して、 devDependency および @angular-builders/custom-webpack をバージョン 15.0.0 に更新します。
```
yarn upgrade @angular-builders/custom-webpack@15.0.0 --dev
```
以下のコマンドを実行してアプリケーションを開始し、カスタム画面が正常に機能していることを確認します。
```
yarn start-app
```
このコマンドの実行時に、型検査に関連するエラーが表示された場合は、拡張コードを修正して、変数に適切な型を定義してください。
すべての拡張アプリケーションの package.json にある build-app:extension コマンドは、構成引数を考慮するように変更する必要があります。例えば、 "build-app:extension": "ng build override-component --prod" を "build-app:extension": "ng build override-component --configuration production"に変更する必要があります。
23.2.6.0-10.0.2306.0 DTK から新規ワークスペースをセットアップします。
1. 前のワークスペースから新しいワークスペースに angular.json をコピーします。
2. マイグレーションされた拡張機能を前のワークスペースから新しいワークスペースにコピーします。
3. 以下のコマンドを再実行して、拡張機能をテストします。
```
yarn bootstrap
```
```
yarn start-app
```
注:
- 最新の DTK から、 extensions/features/override-component および extensions/features/override-modals にあるオーバーライド・コンポーネント・アプリケーションおよびオーバーライド・モーダル・アプリケーションの src/app/app.component.ts の内容をコピーまたは置換します。
- Angular バージョン 13 はサポートされなくなったため、ユーザー・インターフェースのカスタマイズを、最新またはサポートされている Angular バージョンにアップグレードする必要があります。詳しくは Angularのバージョン管理とリリースをご覧ください。
- Angular バージョン 15 にマイグレーションできないが、Angular 13 で拡張機能を変更したい場合は、以前の 23.1.3.1-10.0.2303.2 DTK を使用してカスタマイズを引き続き作成できます。最新の機能、機能拡張、およびフィックスを入手するには、Angular バージョン 15 にアップグレードする必要があります。