How do I migrate the project to support SmartUX v2.x

Welcome to our guide on migrating the project to SmartUX 2.x, if you already have the Magic xpa 4.11 version installed, this guide will walk you through the necessary steps to migrate the SmartUX application to the latest version which is version 2.x Follow the instructions below to ensure a smooth upgrade process.

• Now go to the angular.json file.
• After the Angular version 17 update, changes are required in the angular.json file.
• The “browser target” key from Serve, Build and extract-i18 config is changed to “build target”.
• Need to reflect the same change in the angular JSON file.
• You can refer to the below screen and perform changes to the angular JSON file accordingly.

• Now locate the package.json file.
• Edit the package dependencies version from the package JSON file by referring to the presented screenshot.
• This screenshot contains angular version 17 supported package versions which are for reference.
• For Magic xpa 4.11 related packages please check the latest released version.
• Make sure you check and update all package versions so you won’t get any errors later.
• If you have any package which does not support the angular version 17 you may need to upgrade the version accordingly.

• Also, update the dev-dependencies package version with compatibility to angular version 17.
• You can refer to the screenshot for your reference.
• Make sure you check the Magic package’s latest released versions and update accordingly.
• This is important to support your application in the SmartUX 2.x version.
• Once you are done with the step now delete old node modules and package lock JSON file and run npm install.
• This will install the latest angular node modules.

• After the npm install is completed, now go to the magic.gen.lib.module.ts file.
• Here we need to update a few things that are needed to support the latest package version of “ngx-currency” code changes.
• In case of any error, you can also refer latest xpa web client-generated application to confirm the changes.

• In the Magic Gen Lib module file, first, find the Ngx Currency Module imports and remove them from the module imports array and its import declarations.
• Also, check for Currency Mask config and remove its declaration and module providers.
• Once you have removed the code, now import Ngx Currency Directive and its new provider environment ngx currency.
• This change is needed to support the new version update implementation of “ngx-currency” package.
• In case of any error refer latest application generated from the Magic xpa web client check the magic.gen.lib.module.ts file and confirm the changes.

• Here’s the updated magic gen lib module imports and providers array will look like.

• If your application is built using one of the application templates provided by SmartUX.
• You also need to perform a few steps. If not feel free to skip the steps

• After the angular version update to 17, The package “ngx-perfect-scrollbar” is no longer supported.
• Also, the package author no longer supports the package.
• So need to remove this package from the package JSON file.
• As a replacement to the package now we are using the CoreUI scrollbar.
• Once you are done with the step now delete old node modules and package lock JSON file and run npm install.
• This will install the latest angular node modules.

• After the npm install is completed, now go to the app module and magic gen lib module files.
• Here we need to update a few things that are needed to support the removed package “ngx-perfect-scrollbar” code changes.
• You can also refer latest angular full menu template module files to update the module import and provider changes.

• In the app module and magic.gen.lib.module.ts files, first, find the Perfect Scrollbar Module import and remove it from the module imports array and import declaration.
• Also, check for the default perfect scrollbar config and remove its declaration and module provider.
• This change is needed to support “ngx-perfect-scrollbar” package removal.
• In case of any error refer latest application template app module file and confirm the changes.

• Here’s the updated app module imports and providers array will look like.

• Now find the Start Program component HTML and Typescript files.
• Remove the perfect-scrollbar HTML tag and the Perfect Scrollbar config variable to support the package Perfect Scrollbar removal.

Once you are all done with the upgrade, you are good to go. You are now ready to use the SmartUX application with the version of SmartUX 2.x with Magic XPA 4.11