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.
This Parameter is removed from @spartacus/core’
Added in New module called @spartacus/asm/root;
ConfigModule.withConfig object is removed.
Instead of that we need to add the object values in Providers object
getBaseEndpoint function has been removed.
And it’s been replaced by getBaseUrl
Resolve function with empty parameter has been changed.
And the Success response variable needs to be passed through resolve as a parameter
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 removed from @spartacus/storefront
LoginFormModule moved to '@spartacus/user/account/components’;
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 has been removed from the Spartacus.
Instead of that we need to replace it with the stable function
Then function changed into promise function.
FormErrorsModule removed from @spartacus/storefront
FormErrorsModule moved to @spartacus/user/account/components;
AsmService removed from @spartacus/core
AsmService moved to @spartacus/asm/core;
TokenTarget removed from @spartacus/core
TokenTarget moved to @spartacus/asm/root;
AsmConfig removed from @spartacus/core
AsmConfig moved to @spartacus/asm/core;
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
This Parameter is removed from @spartacus/core’
Added in New module called @spartacus/cart/base/core
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.
