Upgrading to Angular version 15

Sterling Store Engagement is upgraded to Angular version 15. Ensure that you migrate your extensions to Angular version 15.

Before you begin

You must have Angular version 13 workspace from the 23.1.3.2-10.0.2303.2 DTK.
Ensure that you are on node.js version 14.19.0.

About this task

The migration activity is a two-step process. First, you need to migrate from Angular version 13 to 14, and then migrate from version 14 to 15.

Procedure

Run all the commands from <WORKSPACE>/store-frontend-src folder.

Upgrade Angular core and cli to version 14 by running the following command:
```
ng update @angular/core@14 @angular/cli@14 --allow-dirty --force
```
Add the dependency, @messageformat/core with version 3.1.0 by running the following command:
```
yarn add -W @messageformat/core@3.1.0
```
Update the dependency, single-spa-angular to version 7.1.0 by running the following command:
```
yarn upgrade single-spa-angular@7.1.0
```
Update devDependency, @angular-builders/custom-webpack to version 14.1.0 by running the following command:
```
yarn upgrade @angular-builders/custom-webpack@14.1.0 --dev
```
Download and install the node.js version 16.4.0.
1. In the PATH environment variable, update /path/to/nodejs-16.14.0/bin.
2. Verify the node version by running the following command:
```
node -v
```
Install yarn version 1.22.5 globally by running the following command:
```
npm install --global yarn
```
Install Lerna as a global module by running the following command:
```
npm install -g lerna@4.0.0
```

Create the following test.ts file, and copy the file to extensions/features/override-component/src/. The test.ts file is important for the angular upgrade script to run successfully.

/*******************************************************************************
* 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 }
}
);

Replace devDependencies of styles library that are present in /extensions/libs/styles/package.json and /packages/libs/styles/package.json.

"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"
  },

Delete the yarn.lock file that is present in store-frontend-src.
Install devDependencies by running the following command:
```
yarn bootstrap
```
Upgrade Angular core and cli to version 15 by running the following command:
```
ng update @angular/core@15 @angular/cli@15 --allow-dirty --force
```
Update the following dependencies by running the corresponding command.
- Update ngx-translate-messageformat-compiler to 6.2.0 by running the following command:
```
yarn upgrade ngx-translate-messageformat-compiler@6.2.0
```
- Update single-spa-angular to 8.1.0 by running the following command:
```
yarn upgrade single-spa-angular@8.1.0
```
- Update @carbon/chartsto 1.7.6 by running the following command:
```
yarn upgrade @carbon/charts@1.7.6
```
- Update @carbon/charts-angular to 1.7.6 by running the following command:
```
yarn upgrade @carbon/charts-angular@1.7.6
```
Update devDependency and @angular-builders/custom-webpack to version 15.0.0 by running the following command:
```
yarn upgrade @angular-builders/custom-webpack@15.0.0 --dev
```
Start the application by running the following command, and validate that the custom screens are working fine.
```
yarn start-app
```
When you run this command, if you see errors related to type checks fix the extension code to define proper types for variables.
The build-app:extension command present in package.json of all the extended applications needs to be modified to consider the configuration argument. For example, "build-app:extension": "ng build override-component --prod" must be changed to "build-app:extension": "ng build override-component --configuration production"
Set up a new workspace from the 23.2.6.0-10.0.2306.0 DTK.
1. Copy angular.json from the previous workspace to the new workspace.
2. Copy the migrated extensions from the previous workspace to the new workspace.
3. Rerun the following commands to test extensions.
```
yarn bootstrap
```
```
yarn start-app
```
Note:
- Copy or replace the contents of src/app/app.component.ts of override-component and override-modals applications at extensions/features/override-component and extensions/features/override-modals from the latest DTK.
- As Angular version 13 is no longer supported, you must upgrade your user interface customizations to the latest or supported Angular version. For more information, see Angular versioning and releases.
- If you cannot migrate to Angular version 15, but want to modify your extensions in Angular 13, you can continue to build your customizations with the previous 23.1.3.1-10.0.2303.2 DTK. To get latest features, enhancements, and fixes, you must upgrade to Angular version 15.