Upgrading a White-Label Portal from Angular JS to Angular 5

Paritoshik Paul August 31, 2018

One of the world’s leading providers of mobile device trade-in and reuse solutions approached Intelegencia to have its existing Angular JS portal to be upgraded to Angular 5. The client wanted enhanced search visibility of its portal on top search engines. They wanted it to be ADA compliant, capable of managing Google tags and Analytics features and most importantly to be able to build as white-label multi-portal solution.

Intelegencia’s engineering team looked at the available solutions and their existing pieces in detail and decided on Angular CLI to build the white-label solution. Every configuration imperative went on document. The aim was to create a white-label solution that allows the end user to choose and bundle core components and makes portal specific bespoke components. Additionally, the site becomes capable of managing Google Tags by implementing Angulartics-google-tag-manager based on custom configuration provided at build time for each new build/portal. TDD mode is best suited for the application, through Jasmine framework and Karma for Unit Testing. The site becomes ADA compliant with the usage of Angular-Aria. Angular Universal was used to develop SEO capabilities by implementing Server Side Rendering (SSR).

The application was built in Angular 5, Angular CLI, Angular Universal, Jasmine Framework, Karma and Angular-Aria

The client wanted to specify a portal configuration at build time and the program re-brands with configured bespoke branding features. With our prior experience in Angular, we knew it would be a challenge with Angular 5 architecture to make a SEO friendly white-label build in nature.

Our developers began by relying on program build parameters to start making a build with (white-label) program specific resources that would help identify the most appropriate search models and style sheets for use. The structure of the code was one of the critical pieces, which would ensure the application supported multiple branding and flow with ease. With Angular Universal based Server Side rendering (SSR) in place, the white-label delivers excellent page speed and ranking along with excellent user experience.

We created core components for each portal and bootstrapped the same based on the program specific needs, keeping it white-label with SSR running on each portal. The application was tested with 70% code coverage that includes functional, snapshot, branches and component lifecycle Unit tests.

The challenge was to upgrade an existing portal to SEO enabled white-label portal on Angular 5! Intelegencia confidently answered the challenge and addressed all implicit and explicit requirements raised by the client. The product is now in deployment phase and we are currently working on upgrading it to Angular 6.

Leave your comment