CSS styling is not working in production build

Hi All,

I have created an application having side menu using ionic2. When I select an item from the side menu the item is highlighted like the below given picture

the code for highlight is

isActive(page: any) {
    let childNav = this.nav.getActiveChildNavs()[0];
    if (childNav) {
      if (childNav.getSelected() && childNav.getSelected().root === page.tabComponent) {
        return '#f53d3d';
      }
      return;
    }

    if (this.nav.getActive() && this.nav.getActive().name === page) {
      return '#f53d3d';
    }
    return;
  }

the html section is

<button ion-item menuClose  class="navigation-items" (click)="openPage('ChatPage')" detail-none>
              <ion-icon item-start name="chatbubbles" [color]="isActive('ChatPage')"></ion-icon>
              <span [ngClass]="isActive('ChatPage') ? 'red-color':'white-color'"> Chats</span>
            </button>

The issue comes when I create a production build using the command ionic cordova run android --prod --release
and signed using android studio. If I select the item from side menu it is not getting highlighted.

Could you please help me with this issue? Why the styling is not getting reflected?

Hello,

maybe it is a problem with uglifying.

Maybe it helps, when you use instead a function with literal pagename a variable. You call a function that change your variable and use it like [color]=“mycolorvariable”

Best regards, anna-liebt

1 Like

Hi anna_liebt,

Thanks for your reply. I have to give color based on the condition,thats why I used a function. Also I have tried [color]=“mycolorvariable” this also. Both are working fine with debug builds. It is not working with the production one.

Hello,
maybe you can integrate a toast or similar output which contain the values of your if parts to see if there is a difference between serve and build.

best regards, anna-liebt.