Upgrade to Angular 18

Last updated:
Edit on GitHub

This document describes how to upgrade Angular to version 18. Angular 18 provides improved developer experience, performance optimizations, and tooling enhancements.

This upgrade affects the following Marketplace modules, which have been updated with minor changes:

MODULE NAME VERSION
AgentDashboardMerchantPortalGui 1.0.0 → 1.1.0
AgentSecurityMerchantPortalGui 1.1.0 → 1.2.0
CommentMerchantPortalGui 1.0.0 → 1.1.0
DashboardMerchantPortalGui 3.0.0 → 3.1.0
DummyMerchantPortalGui 0.5.0 → 0.5.1
GuiTable 3.2.0 → 3.3.0
MerchantAppMerchantPortalGui 1.1.0 → 1.2.0
MerchantProfileMerchantPortalGui 3.0.0 → 3.1.0
MerchantRelationRequestMerchantPortalGui 1.0.0 → 1.1.0
MerchantRelationshipMerchantPortalGui 1.0.0 → 1.1.0
ProductMerchantPortalGui 4.6.0 → 4.7.0
ProductOfferMerchantPortalGui 3.0.1 → 3.1.0
SalesMerchantPortalGui 3.0.2 → 3.1.0
SecurityMerchantPortalGui 3.5.0 → 3.6.0
UserMerchantPortalGui 3.2.0 → 3.3.0
ZedUi 3.2.0 → 3.3.0

Estimated migration time: ~15 minutes

Update Spryker modules

Update the Marketplace modules:

composer update spryker/agent-dashboard-merchant-portal-gui spryker/agent-security-merchant-portal-gui spryker/comment-merchant-portal-gui spryker/dashboard-merchant-portal-gui spryker/dummy-merchant-portal-gui spryker/gui-table spryker/merchant-app-merchant-portal-gui spryker/merchant-profile-merchant-portal-gui spryker/merchant-relation-request-merchant-portal-gui spryker/merchant-relationship-merchant-portal-gui spryker/product-merchant-portal-gui spryker/product-offer-merchant-portal-gui spryker/sales-merchant-portal-gui spryker/security-merchant-portal-gui spryker/user-merchant-portal-gui spryker/zed-ui

Update engines and dependencies

  1. In package.json, update the engines block:
"engines": {
  "node": ">=18.19.0",
  "npm": ">=9.0.0"
},
  1. In package.json, add or update dependencies:
"dependencies": {
  "@angular/animations": "~18.2.9",
  "@angular/cdk": "~18.2.9",
  "@angular/common": "~18.2.9",
  "@angular/compiler": "~18.2.9",
  "@angular/core": "~18.2.9",
  "@angular/elements": "~18.2.9",
  "@angular/forms": "~18.2.9",
  "@angular/platform-browser": "~18.2.9",
  "@angular/platform-browser-dynamic": "~18.2.9",
  "@angular/router": "~18.2.9",
  "@ctrl/tinycolor": "^4.1.0",
  "ng-zorro-antd": "^18.2.1"
}
  1. In package.json, add or update devDependencies:
"devDependencies": {
  "@angular-builders/custom-webpack": "~18.0.0",
  "@angular-devkit/build-angular": "~18.2.9",
  "@angular-eslint/eslint-plugin": "~18.4.3",
  "@angular-eslint/eslint-plugin-template": "~18.4.3",
  "@angular-eslint/template-parser": "~18.4.3",
  "@angular/cli": "~18.2.9",
  "@angular/compiler-cli": "~18.2.9",
  "@angular/language-service": "~18.2.9"
}
  1. Install npm dependencies:
npm install

Optional: Check for broken hoisting

After running npm install, some dependencies may end up in unexpected nested locations. Example:

package-lock.json

vendor/spryker-shop/zed-ui/node_modules/@spryker/notification

In this case, fully regenerate the lock file and reinstall the modules:

rm -rf node_modules ./**/node_modules package-lock.json && npm install

This ensures hoisting is correctly applied and all dependencies are installed to the root.