Spartacus 5.0 upgrade from 3.4 - Successful Installation Procedure and Challenges

[former_member871918]

Summary:

To up to date with our SAP project version of 2211, we started to analyze and execute the Spartacus version 3.4 into 5.0.

• As per the document and update we decided not to upgrade directly to 5.0 from 3.X versions. There are lots of dependency needs to be updated properly. For Example: Angular, Ng select, bootstrap, typescript, etc.


• So, we have started to upgrade the Spartacus to 4.0 as the first step. After Successful execution and fixes the compatibility issues of 4.0 with 2211 we started to fix the Compatibility issues in 5.0, then we would continue with 5.0.


• Previously when we update the Spartacus 3.2 into 3.4. there is not much problem with dependency as well as no problem with technical changes from front end point of view.

Dependency Versions compatibility issues we have faced during 4.0:

In this Phase, we got most number of issues faced due to not updating the dependency version issues such as, Angular, Bootstrap, Ng-select, I18next, i18next-http-backend, Tslib, Typescript

First we had to update the dependency versions to compatible with Spartacus 4.0. To know the exact version of specific dependencies we can refer the sap documentation. But some of the dependencies we need to figure out in the compile time.

Those dependencies version changes we have done for our application is below,

• Angular version should be updated as 12


• Bootstrap will be 10


• Ng-select will be 7


• I18next : 20.2.2


• @i18next-http-backend": 2.1.1


• Tslib will be : 2.3.0


• Typescript will be 4.2.3

Library Compatibility issues we have faced during 4.0:

After dependency version issues got solved, we looked at library compatibility issues which we used and imported in our application.

We have to update the libraries wherever files have the below modules with old libraries.

• CsAgentAuthService

This Parameter is removed from @spartacus/core’

Added in New module called @spartacus/asm/root;

• ConfigModule.withConfig

ConfigModule.withConfig object is removed.

Instead of that we need to add the object values in Providers object

•  getBaseEndpoint

getBaseEndpoint function has been removed.

And it’s been replaced by getBaseUrl

• Resolve

Resolve function with empty parameter has been changed.

And the Success response variable needs to be passed through resolve as a parameter

• getURL

getUrl function has been removed and replaced with BuildUrl.

Inside object we have to change the format as per the official document. i.e(key and object)

• LoginFormModule

LoginFormModule removed from @spartacus/storefront

LoginFormModule moved to '@spartacus/user/account/components’;

• CheckoutCoreModule

CheckoutCoreModule removed from @spartacus/checkout/core

CheckoutCoreModule moved to @spartacus/checkout/occ’;

• CheckoutComponentsModule


• CheckoutLoginModule


• OrderConfirmationModule


• ReplenishmentOrderConfirmationModule

All above modules are moved to @spartacus/checkout/components

• getStableConfig

getstableConfig has been removed from the Spartacus.

Instead of that we need to replace it with the stable function

• Then()

Then function changed into promise function.

• FormErrorsModule

FormErrorsModule removed from @spartacus/storefront

FormErrorsModule moved to @spartacus/user/account/components;

• AsmService

AsmService removed from @spartacus/core

AsmService moved to @spartacus/asm/core;

• TokenTarget

TokenTarget removed from @spartacus/core

TokenTarget moved to @spartacus/asm/root;

• AsmConfig

AsmConfig removed from @spartacus/core

AsmConfig moved to @spartacus/asm/core;

• AsmActions

AsmActions removed from @spartacus/core

AsmActions moved to @spartacus/asm/root;

With above compiler issues fixes, we were able to get the Site up for our project with Spartacus 4.0. So after succeed with 4.0, we had proceeded further with 5.0 installation.

Challenges through 5.0

• Direct Spartacus 5.0 installation is not possible with local system so after go through the SAP document, We came to know that only with S-User ID needs to be changed as technical user that has been done by Sap Admin Users.


• SAP environment has the appropriate licenses to download the composable storefront libraries.


• In the root of your Angular application, create an .npmrc file with the following content: @spartacus:registry=https://73554900100900004337.npmsrv.base.re positories.cloud.sap/ //73554900100900004337.npmsrv.base.repositories.cloud.sap/:_auth= always-auth=true


• In the .npmrc file, replace with the NPM Base64 Credentials you copied from the RBSC website.

Now we have to check all the dependency version compatibility which we we done before for 4.0 execution. This time even more higher verisions to upgrade

• Angular version should be updated as 14


• Ng-select will be 9.0.2


• I18next : 22.2.0 (There is no doc available for 4.0 to update this)


• @i18next-http-backend": 2.1.1 (There is no doc available for 4.0 to update this)


• Tslib will be : 2.3.0 (There is no doc available for 4.0 to update this)


• Typescript should be 4.7.2)

 

Fixes and solutions during the 5.0 installation and compilation

• Activecartservice

This Parameter is removed from @spartacus/core’

Added in New module called @spartacus/cart/base/core

• UserTransitionalModule

This Parameter is renamed to UserModule from @spartacus/core’

• UserOccTransitionalModule

This Parameter is renamed to UserOccModule from @spartacus/core’

• OrderHistoryModule


• OrderDetailsModule


• OrderCancellationModule


• OrderConfirmationModule


• OrderReturnModule


• ReturnRequestListModule


• ReturnRequestDetailModule


• ReplenishmentOrderHistoryModule


• ReplenishmentOrderDetailsModule

All above modules are moved from @spartacus/checkout/components To @spartacus/order/components

 

With above compiler issues fixes, we are able to get the Site up our application with Spartacus 5.0 Successfully.

 

After succeed with 5.0, We got common issue with most of the pages like smart edit etc. in smart edit, we got a issue with maximum stack overload. After doing lots of R and D, We struggled to fix the page. But after sometime, we tried to upgrade the angular version into 15 and issue solved successfully.

Other page issues we got cleared through some fixes and now 5.0 works well with our Project.