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

 

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.

 

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

 

The complete home.ts file will look like this

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 🙂

2 thoughts on “Ionic Lazy Loading Issue | Get Current Component/ Page/ View name in Production Release”

Leave a Reply

Your email address will not be published. Required fields are marked *