Updating customizations to the latest Angular version

As new Angular versions are released, Order Hub is often upgraded to the latest version. These changes bring improvements such as faster installations, start, and build times. If you are on earlier Angular versions, to take advantage of the new features, you want to migrate your custom applications to the latest Angular version. These new applications can be stored in either a monorepo or a standard Angular repository.

About this task

To make sure that your customizations work properly, you need to update your customizations as a process sequentially (update to v16, v17, and then v18) in stages. For each Angular version upgrade, remove packages such as @angular/material or @angular/cdk from the command if they are not part of the package.json but include dependencies that need to be part of the upgrade.

The migration steps can vary if the project is not a Lerna project. In this case, upgrade the Angular versions first, then upgrade the material and other dependencies.

Procedure

Update to Angular v16 as follows.
Due to peer dependencies and incompatibility of the common components package, the update to Angular v16 is forced.
For a stand-alone Angular project
Enter the following commands.
```
yarn ng update @angular/core@16 @angular/cli@16 --force
yarn ng update @angular/cdk@16 @angular-eslint/schematics@16 @angular/material@16 --force
```
Note: Do not include @angular-builders/custom-webpack@16 in the upgrade for stand-alone projects. The command is split into two commands.
For a monorepo
Enter the following command.
```
yarn ng update @angular/core@16 @angular/cli@16 @angular-builders/custom-webpack@16 @angular/cdk@16 @angular-eslint/schematics@16 @angular/material@16 --force
```
Verify your updates with the Angular update guide.

Update to Angular v17 as follows.

If the @angular-devkit/build-ng-packagr package exists in your package.json file, uninstall it.

For a stand-alone Angular project

Enter the following commands.

yarn ng update @angular/core@17 @angular/cli@17 --force
yarn ng update @angular/cdk@17 @angular-eslint/schematics@17 @angular/material@17 --force

For a monorepo

Enter the following command.

yarn ng update @angular/core@17 @angular/cli@17 @angular-builders/custom-webpack@17 @angular/cdk@17 @angular-eslint/schematics@17 @angular/material@17 --force

Verify your updates with the Angular update guide.

Update to Angular v18 as follows.
For a stand-alone Angular project
Enter the following commands.
```
yarn ng update @angular/core@18 @angular/cli@18 --force
yarn ng @angular/cdk@18 @angular-eslint/schematics@18 @angular/material@18 --force
```
For a monorepo
Enter the following command.
```
yarn ng update @angular/core@18 @angular/cli@18 @angular-builders/custom-webpack@18 @angular/cdk@18 @angular-eslint/schematics@18 @angular/material@18 --force
```
Note: When you run this command, you see a migration prompt to use the application builder (use-application-builder). If you are upgrading a morepo, click Enter to proceed. Do not use the @angular-devkit/build-angular:browser-esbuild or the @angular-devkit/build-angular:browser builders.
Verify your updates with the Angular update guide.

What to do next

After completing the update to the latest Angular release, do the following.

Make sure to lint your changed module files. If the schematics did not correctly remove them, manually remove HttpClientModule.

Update your .eslintrc.json files. Remove two of the plug-in extensions and add a plug-in extension.

"extends": [
  "plugin:@angular-eslint/ng-cli-compat",                      // - Remove
  "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",   // - Remove
  "plugin:@angular-eslint/recommended",                        // + Add
  "plugin:@angular-eslint/template/process-inline-templates"   // No Change
],

Install the @types/topojson-specification dependency by entering the following command.
```
yarn add -D @types/topojson-specification ## (include `-W` for lerna monorepo)
```
To use the latest available versions, change all @buc namespace packages in your project's package.json file. Change the versions to the latest one according to what is in the orderhub-code/lib file.