Solved – Angular router outlet appended the view instead of replacing it

Recently while working on an Angular project, we faced a very weird issue while working on one of the third-party plugins recently – the Angular router outlet appended the view instead of replacing it. We spent considerable amount of time searching for solution, before finally cracking it. We hope this article saves your time.

Problem

The router outlet did not load the component that we had asked it to load, instead it appended the view on top of the previous view.

Structure of our component looked something like this –

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

 

From the dashboard component (for which the route is ‘/dashboard’) we asked the router to replace the view with home component (for which the route is ‘/home).

This is how the navigation code looked like,

import { Router } from ‘@angular/router’;
constructor( private router: Router) {}
this.router.navigate([‘/home]);

But this did not work as expected. The layout after the router navigation looked something like this –

 

Angular router outlet appended the view instead of replacing

 

Instead of replacing, it placed the Home view above the Dashboard view!

 

Solution

We dug deeper to understand why this happened. Here’s what we found –

The plugin we used took the application out of Angular’s ecosystem (which is good as it optimizes performance when starting a work consisting of one or more asynchronous tasks that don’t require UI updates or error handling to be handled by Angular).

In the handler function of the plugin, the ‘this’ keyword that we had used did not hold proper value for the router object.

To force the chunk of code to execute back in the required and necessary “Angular ZONE” we just replaced the navigation code with the following lines,

import { Router } from ‘@angular/router’;
import { NgZone } from ‘@angular/core’; // do not forget the import 🙂
constructor( private router: Router , public zone: NgZone) {}
this.zone.run(() => { this.router.navigate([‘/home]); });

 

That’s it! 🙂

Happy Coding!

 

References

For more information on ngZone check out Angular docs at https://angular.io/api/core/NgZone

AgilizTech Third Anniversary Celebrations

AgilizTech third anniversary bash – A day of reminiscence, inspiration and celebrations

We are elated to announce that AgilizTech completed three years of its journey on June 10, 2018. What started as a small aspiration of Mr. Ganesh Babu (MD and CEO of AgilizTech) has taken flight as an upcoming company in the IT services arena. To mark this important milestone, on June 09, 2018, the AgilizTech family congregated at Golden Palms Resort, Bangalore for a day of cheer and celebrations.

It was a cloudy Saturday when we assembled at Golden Palms resort. Set amidst lush greenery, the sights instantly refreshed us from the daily hustle and bustle of the city, and the glowing screens of our laptops. It was with this refreshed mindset and a jolly festive mood that the AgilizTech extended family (the team and their family members) gathered for the celebrations.

Hosted by Ms. Meghana Manjunath and Mr. Surya Saravana Kumar, the day started on a traditional note with a lamp lighting ceremony in which the guests participated.

agiliztech third anniversary

Guests participating in lamp lighting ceremony

Mr. Anand Gangoor, Head – Service Delivery at AgilizTech, welcomed the gathering and introduced the chief guest for the day, Mrs. Arundhati Rao, Director at DXC technology, an industry stalwart and motivational speaker, and the other dignitaries – Mr. Alakappan Sreenivasan and Mrs. Deivanai Alakappan Sreenivasan, Mr. Koilraj Jeyasingh (Solution Architect at TCS) and Mrs. Vijaya Bharathi Ganesh.

The event proceeded, with the organization updates provided by Mr. Ganesh Babu, Mr. Sujeeth Shetty (VP – Sales and Marketing at AgilizTech), Mr. Anand Gangoor (Senior Technical Delivery Manager) and Mr. Karan Singh (Senior Project Manager).

agiliztech third anniversary

Mr. Ganesh providing company updates

 

The speakers touched upon the past year’s performance, projects delivered, new customer acquisitions, new product rollouts and employee performance.

While Mr. Ganesh took us for a stroll down the memory lane and made us familiar with the current company position, and the roadmap, he also gave us the mantra for the year – 3Cs.

Competency Strengthening

Technical, Processes & Customer Focus

Aiming to strengthen our technical skillsets, streamlining process and having a razor-sharp focus on customer experience.

Constantly Innovate

Improve Productivity, Emerging Technologies & Customer Solutions.

Developing innovative solutions using the latest technologies, and reducing repetition and redundancy with a smarter, more productive way of working.

Consistently Grow

With existing Customers, New Customers & New Products

Improve service delivery and enhance customer experience thereby gaining recurring customers.

 

Mr. Sujeeth spoke on the importance of upskilling ourselves to serve customers better and take up more challenging opportunities. Mr. Anand elaborated on the service delivery practice at AgilizTech, bottlenecks and solutions, and Mr. Karan showcased the goodwill enjoyed by AgilizTech among current employees as well as aspirants using Glassdoor statistics.

 

What TAKE stands for…

Next, the chief guest Mrs. Arundhati Rao was called on stage to present her keynote, which was short yet impactful.

Mrs. Rao explained how we should apply the TAKE formula in our professional and personal lives to be successful. According to Mrs. Rao TAKE stands for:

T – ‘T’echnology

Wherein we ought to look at technology as a means to achieve ends. Technology is the great enabler that solves business problems. So, focus on how to end the customer problem, and then pick up a technology that suits the situation.

A – ‘A’spire

Often, people look at jobs as nine to five’s that pay the bills and keep us occupied. Mrs. Rao urged us to seek more from life by aspiring for higher goals. She stressed upon the point of building careers over holding jobs.

K –S’k’ills

In order to aspire and grow, individuals need to acquire and polish skills. In a fast-changing world, where a new technology emerges every other day, it is important to stay updated. While staying put makes one complacent, staying relevant to the industry helps one tap into new opportunities.

E – ‘E’mpower

Mrs. Rao explained that we must all empower ourselves by showing initiative and helming responsibilities even when it is not expected of us. We must not just do a job, we must own it.

It was a very inspiring 45-mins speech that motivated us all to be better employees and individuals. We are sure that these nuggets of wisdom from such experienced professionals would help us move ahead in our careers and lives.

Awards galore at the AgilizTech Third Anniversary celebrations

To recognize the contributions of the employees over the years, AgilizTech presented awards and certificates. The awards were handed over by the guests – Mrs. Arundhati Rao, Mr. Alakappan Sreenivasan and Mrs. Deivanai, Mr. Koilraj Jeyasingh, Mr. Ganesh Babu and his wife Mrs. Vijaya Bharathi.

Awards presented to the AgilizTech team members on the occasion of the third anniversary celebrations.

Posted by AgilizTech on Wednesday, June 13, 2018

 

Time for some fun

A Tabla Tale

Master Arnav, son of Mr. Anand Gangoor, entertained us all with his tabla prowess.

agiliztech third anniversary

Master Arnav on the Tabla

 

Dubsmash – A smash hit among the AgilizTech Team

The Dubsmash craze has swept the whole world and we Agilians aren’t immune either. The AgilizTech Fun Committee had asked the entire team to create dubsmashes and submit. It was quite a new way for everybody to let their hair down and get out of comfort zones. The result was a compilation of downright hilarious videos in a mélange of languages – Hindi, Kannada, Tamil and more. The audience thoroughly enjoyed the videos almost as much as the team did when creating them.

Apart from dubsmash, AgilizTech Fun Committee had also asked the team to create videos expressing their thoughts on AgilizTech’s third anniversary. What resulted was a beautiful compilation of videos where employees conveyed their heartfelt wishes towards the continued success of AgilizTech.

Here’s the video.

 

Cut the Cake!

No anniversary celebration is ever complete without a cake cutting ceremony. And we are not ones to be left behind. We had a beautiful 3Kg White Forest delicacy for the AgilizTech third anniversary celebrations, and the whole team participated in the cake cutting.

agiliztech third anniversary

Cut the cake!

 

Fun in the sun

With that the formal event came to an end and the AgilizTech family was free to enjoy lunch and the splendors of the Golden Palms Resort. The swimming pool was a major attraction as a lot of employees chilled in the blue waters. Later the team moved on to the cricket ground for some friendly matches, wherein individuals showcased their cricketing prowess.

The AgilizTech third anniversary was a day of merriment, motivation and celebration for the entire AgilizTech family. Three years is a very important milestone in our journey, and we will strive to work harder as there are many more miles to go and many, many more summits to climb. We also take this opportunity to thank all our customers, partners and well-wishers who have stood with us throughout this period and provided encouragement and support.

Onward, we march!

Worldpay payment gateway redirection issue

Resolved – Worldpay payment gateway redirection issue

Worldpay is a global leader in payments processing technology and solutions for businesses. One of their key offerings is the payment gateway, which businesses integrate with their websites to enable online payments for customers. While building a solution for one of our UK clients, we encountered the Worldpay payment gateway redirection issue, that is, once the payment was completed, the user was not getting redirected to the website.

We searched high and low to resolve this, looked up all sorts of documents, but the solution evaded us. We even tried calling the Worldpay Support staff but couldn’t get much out of them. In the end, through endless trial and error we hit upon this solution. We hope this article saves you time and effort and helps you resolve the issue quickly.

Here are the steps to fix the Worldpay payment gateway redirection issue.

Note: This is for the Worldpay Business Manager users

Worldpay Business Manager Settings Change

  1. Log into Worldpay Business Manager and navigate to Setup > Installations
  2. Click the Settings button next to your domain in Test
  3. Ensure that the fields are filled as shown below

Worldpay payment gateway redirection issue

  1. Click Save Changes button

 

Copy resultC.html and resultY.html from CPanel to PC

  1. Login to CPanel of your domain (Siteground in my case)
  2. Navigate to File Manager > Webroot > Wp-content > plugins > business-worldpay-gateway-for-woocommerce > Payment pages > required
  3. Copy the resultC.html and resultY.html files to your PC

Worldpay payment gateway redirection issue

 

Add resultC.html and resultY.html in Worldpay Business Manager

  1. Next, log into Worldpay Business Manager and navigate to Setup > Installations > Edit Payment pages
  2. Under File menu, select File Management
  3. Upload the resultC.html and resultY.html files here

Worldpay payment gateway redirection issue

 

Try a test payment

  1. Now make a test payment in the website and check if it gets redirected

 

Copy settings to production

  1. Copy the same settings to Production in Worldpay Business Manager

The Worldpay Payment Gateway redirect issue is now resolved!