Ionic mobile app working fine on development but not in production

Ionic Framework ionic-v3
1

I am developing my first ionic app. I have finished it and it works perfectly when i make

ionic serve --open

Or when I open it on the Ionic DevApp on my mobile device.

When I create the .apk, almost every functionality works fine; but this one not:

<ion-tab [root]="tab1Root" [enabled]="  _tabs.textToEnableTabs !='AddListPage' " tabTitle="Pending Tasks" tabIcon="home"></ion-tab>

<ion-tab [root]="tab2Root" [enabled]="  _tabs.textToEnableTabs !='AddListPage' " tabTitle="Finished Tasks" tabIcon="information-circle"></ion-tab>

<ion-tab [root]="tab3Root" [enabled]="  _tabs.textToEnableTabs !='AddListPage' " tabTitle="Contact Author" tabIcon="contacts">      </ion-tab>

This code checks if we are on certain component or not, so in case we are on that component, we make tabs not to be clickable.

As I said, this functionality works perfectly on development but not on production, where tabs are ALWAYS clickable. So the [enabled] tag or the condition is not working fine. I don´t know.

Which could be the problem?

In case it helps you, I have a service ShowTabsService where I create that property

//ShowTabsService.ts

textToEnableTabs

And I initialize on constructor:

// ShowTabsService.ts constructor

constructor()
{
    this.textToEnableTabs=""; /*value will change on the addList.ts constructor and on its onDestroy, to make tabs available again*/
}

When I am on the constructor of the AddListPage, where tabs should not be clickeable, I do:

//AddListPage.ts

constructor(
    private _viewController:ViewController,
    private _tabs:ShowTabsService) {

       this._tabs.textToEnableTabs=this._viewController.name; //this will be 'AddListPage' when we are on that component

}

And on the ngOnInit, when we leave that component, we make tabs clickable again by doing:

//AddListPage.ts

ngOnDestroy()
{
    this._tabs.textToEnableTabs="";
}

Maybe it is not the best way of doing it (I am new on both Angular and Ionic) but as I said, that works right on development. Not when I install the signed APK

My environment is:


Ionic:

   ionic (Ionic CLI)  : 4.2.1 (C:\Users\franp\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.1
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.0, (and 5 other plugins)

System:

   Android SDK Tools : 26.1.1 (C:\Users\franp\AppData\Local\Android\Sdk)
   NodeJS            : v10.5.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.1.0
   OS                : Windows 10
2

Read this thread - the whole thing, not just what is marked as the “solution”. The bottom line is that you should never rely on class names.

3

Thanks a lot, didn´t know that minifying could give such problems… Do you mean that when you say “not relying on class names”?

I changed the condition to a boolean one, instead of relying on class name, as you said… now works in production too :slight_smile:

4

Right. Minifiers change class names to arbitrary short identifiers to save runtime space. Additionally, I think you’re better off design-wise with a boolean. That’s really what the service should care about, not what page is active. It makes intention more explicit, which makes for more readable code, and it’s more extensible in the future.

5

Thanks a lot for such a great explanation rapropos. Now is everything clear to me.