Ionic Lazy Loading Issue | Get Current Component/ Page/ View name in Production Release

In this post, we will discuss an issue faced by many Ionic Framework developers related to getting the current page/ view/ component name in the application. In an Ionic application which using Lazy Loading to partially load components are facing such issue.

You can read the post on How to Implement Lazy Loading in Ionic 3 to Optimize App Loading Time in Real Devices. But after we successfully implement Lazy Loading a strange issue comes in after signed version of the app is uploaded in play store.

Also Read: How to Create Signed Release of Ionic 3 for Production

Actually, after we create Signed APK and Zipalign it, the source code including JS and CSS are minified aggressively.

In my case I was having and if condition to handle back press operation in a view. The code looked something like below

...
...

//In debug mode alert value is 'HomePage'
//In production/ signed apk alert value is 'n'

alert(activeView.component.name);
if (activeView.component.name === 'HomePage') {
...
...

So in app-debug.apk it was showing correct value but in production, the code was breaking as the component name changed to 'n' was not matching with starting 'HomePage'.

We need to provide a component name in a string if we are using Lazy Loading in application to load components on request.

So to resolve this what we can do is to use below code instead on above when using Lazy Loading and @IonicPage() decorator in the component.

...
...

//In debug mode alert value is 'HomePage'
//In production/ signed apk alert value is 'HomePage'

alert(activeView.id);
if (activeView.id === 'HomePage') {
...
...

Complete experiment in comments below under debug/ signed and with/ without Lazy Load

      // Return HomePage when in debug mode without lazy load
      // Return Empty on signed version apk without lazy load
      // Return HomePage on debug mode apk with lazy load
      // Return Empty on signed version apk with lazy load
      alert(activeView.component.name);

      // Return n4-0 when in debug mode without lazy load
      // Return n4-0 on signed version apk without lazy load
      // Return HomePage on debug mode apk with lazy load
      // Return HomePage on signed version apk with lazy load
      alert(activeView.id);

The complete home.ts file will look like this

import { Component } from '@angular/core';
import { Platform, App } from 'ionic-angular';

import { IonicPage } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(
    public platform: Platform,
    public app: App
  ) {

    this.platform.ready().then(() => {

      let nav = this.app.getActiveNavs()[0];
      let activeView = nav.getActive();
      alert(activeView.id);
      //if (activeView.component.name === 'HomePage') {
      if (activeView.id === 'HomePage') {
        alert("Yeah...");
      }
    });
  }

}

This resolved my issue, as activeView.id was returning component's full name 😀

So here I tried to explain how I resolved an Issue I faced under explained circumstances and may help anybody in a similar situation.

Thanks and happy coding 🙂