ion-tab template bindings are empty when using --prod to build

[kemety]

Short description of the problem:

I have an App created with Ionic 2.2.1 and I only upgraded the CLI to the latest 3.10.3. I use custom icons from png files for the ion-tab menu. When I compile the App with --prod the icons in the ion-tab navigation bar disappear. I inspected the App in chrome and something very strange is happening, if I run on the simulator with --debug, the icons appear and I see in Chrome that the icons are being loaded and it refers to main.js calling them. When I run on the simulator with --prod, the icons disappear and I do not see them loading at all in chrome. I also compiled the app with --prod and installed the apk on a real phone and the icons did not show.

Building with CLI 2.2.1 works normally even with --prod and the icons show.

What behavior are you expecting?

I expect that the custom icons appear normally when I use --prod

Steps to reproduce:

1. run ionic cordova run android --simulator --prod App loads without menu icons.
2. run ionic cordova run android --simulator Icons appear normally.
3. The code used for the menu in file src/theme/common/overrides.scss

$tab-items: ('item1', 'item2', 'item3', 'item4', 'item5');
ion-icon {
  min-height: 2rem;
  @each $icon in $tab-items {
    &[ng-reflect-name="#{$icon}"] {
      background-image: url(../assets/images/tabs/#{$icon}.png);
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-size: contain;
      &[ng-reflect-is-active="true"] {
        background-image: url(../assets/images/tabs/#{$icon}-active.png);
      }
    }
  }
}

Which @ionic/app-scripts version are you using? 1.1.4

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

[kemety]

I discovered another thing. The generated code for the menu item with --prod ignores the scss written in the overrides.scss file and so the < !--template binding {}--> comes out empty. Check the code generated with --prod and --debug below.

The code for my menu items is the html page

<ion-tabs selectedIndex="2">
  <ion-tab [root]="circle" tabTitle="Circle" tabIcon="circle" [tabBadge]="messageNotificationsCount"></ion-tab>
  <ion-tab [root]="calendar" tabTitle="My Events" tabIcon="agenda"></ion-tab>
  <ion-tab [root]="home" tabTitle="Seena" tabIcon="seena"></ion-tab>
  <ion-tab [root]="notifications" tabTitle="Notifications" tabIcon="bell" [tabBadge]="normalNotificationsCount"></ion-tab>
  <ion-tab [root]="profile" tabTitle="You" tabIcon="profile"></ion-tab>
</ion-tabs>

The scss

tabs-navigation {
    .tabbar
    {
        background: color($colors, tabs-navigation, base) !important;
        border-top-color: darken(color($colors, tabs-navigation, base), 6%) !important;

        .tab-button
        {
            color: color($colors, tabs-navigation, contrast);
        }

        .tab-button:hover:not(.disable-hover),
        .tab-button[aria-selected=true]
        {
          color: $theme-color-1;
        }
    }
}

The wp.scss

ion-app.wp {
    tabs-navigation {
        .tabbar
        {
            .tab-button[aria-selected=true]
            {
                border-bottom-color: $theme-color-1;
            }
        }
    }
}

and the code in the overrides.scss is

$tab-items: ('circle', 'agenda', 'seena', 'profile', 'bell');
ion-icon {
  min-height: 2rem;
  @each $icon in $tab-items {
    &[ng-reflect-name="#{$icon}"] {
      background-image: url(../assets/images/tabs/#{$icon}.png);
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-size: contain;
      &[ng-reflect-is-active="true"] {
        background-image: url(../assets/images/tabs/#{$icon}-active.png);
      }
    }
  }
}

When using the --debug (or just not using --prod) the generated code for the menu item is

<a class="tab-button has-title has-icon disable-hover" href="#" role="tab" ng-reflect-tab="[object Object]" id="tab-t0-0" aria-controls="tabpanel-t0-0" aria-selected="false"><!--template bindings={
  "ng-reflect-ng-if": "circle"
}--><ion-icon class="tab-button-icon icon icon-md ion-md-circle" role="img" aria-label="circle" ng-reflect-name="circle"></ion-icon><!--template bindings={
  "ng-reflect-ng-if": "Circle"
}--><span class="tab-button-text">Circle</span><!--template bindings={
  "ng-reflect-ng-if": null
}--><div class="button-effect"></div></a>

But when using the --prod when building, the generated code for the menu item is

<a class="tab-button has-title has-icon disable-hover" href="#" role="tab" id="tab-t0-0" aria-controls="tabpanel-t0-0" aria-selected="false"><!--template bindings={}--><ion-icon class="tab-button-icon icon icon-md ion-md-circle" role="img" aria-label="circle"></ion-icon><!--template bindings={}--><span class="tab-button-text">Circle</span><!--template bindings={}--><div class="button-effect" style="transform: translate3d(-13px, -23px, 0px) scale(1); height: 105px; width: 105px; opacity: 0; transition: transform 317ms, opacity 222ms 95ms;"></div></a>

[danbucholtz]

Can you please create a minimal project example showing the issue?

Thanks, Dan

[hednei-marangoni]

Hi, I had this problem here too, I fixed with this code:

.tabs-md, .tabs-ios {
    a[aria-selected=true]{
        .tab-button-icon[ng-reflect-name=ICON NAME], .tab-button-icon[aria-label="ICON NAME"] {
            background-image: url('../assets/ICON NAME.active.png');
        }
    }
    a[aria-selected=false]{
        .tab-button-icon[ng-reflect-name=ICON NAME], .tab-button-icon[aria-label="ICON NAME"] {
            background-image: url('../assets/ICON NAME.inactive.png');
        }
    }
}

Now work using ionic cordova run android --prod I saw that when you use --prod the Ionic build without ng-reflect-name.

;)