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') {
...
...

...
...

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

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

      // 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);

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...");
      }
    });
  }

}