Ionic 2 build --prod issue with nav.getPrevious()


#1

Hi,

I have a problem with ionic 2 --prod building.

I have this template:

<button ion-button block (click)="goToPage()">Go to page</button>

An this controller:

constructor(public nav: NavController) {..}

goToPage() {
  if(this.nav.getPrevious().component.name=="Page"){
     this.nav.pop();
  }
  else this.nav.push(Page);
}

I check if the previous page in nav stack is called “Page” if so I pop() to this page, if not I push this page.

Testing in browser is working well. Testing on Android / IOS, emulator / device with ionic build ios and ionic build android also working like a charm.

BUT when I ionic build ios --prod or ionic build android --prod the component “Page” is always pushed even if the previous page is also “Page”!

Any idea why? And how can I fix it?

Thanks


Prod tag removes some functionality
#2

Never rely on class names as strings. As you have observed, minification breaks it. Figure out another solution, such as using lifecycle events.


#3

Thank you for your answer. Can you please give me an example of checking the previous page? I only find this.nav.getPrevious() for that…


#4

Or simply don’t rely on previous from browser app, just use push directly to the page, it’s way more reliable to my experience. Rethink your buttons to only call direct calls to a push page with simple functions. (I have already a 3 levels tabs nav with sub pages, and it works well, all showing top level back button if i want). (and i forgot all 3 tabs are child of home.ts).

goToPage()
this.nav.push(Page);
}


#5

No, I’m saying don’t do that. Each page should be independent of one another, or your design is imposssible to test. Figure out a way to have lifecycle events let pages take control of their own destiny.


#6

Here is the hierarchy of my app: 2 Tabs of lists.

So when i go to list of shops -> i choose a shop -> i go to the list of products (the list is on the same page) -> a choose a product -> i click on "see shop" I want to do a nav.pop() to return to the shop page, because if not (if i push again the page “shop”) it will create an infinite navigation… Can you please help me to handle this problem?


#7

Shouldn’t

navCtrl.popTo(ShopPageComponent);

Work just fine in this scenario?


#8

Yeah, that works but sometimes in need to push the page and not popTo it. For exemple with this scenario:

list of products -> product -> see shop here I push the page “ShopPage” because it is not yet in the stack.

That’s why i need to determine if the previous page is already a “ShopPage”.

I thought about navParameters on the product page. For exemple if the “ShopPage” is already in the stack:

this.nav.push(ProductPage, { button_see_shop: false });

And then I disable the button “See shop”. It is a good idea?


#9

What does the promise from popTo return? If it gives you an error saying it isn’t in the stack, you could push it then


#10

I will try this. Thank you!


#11

It doesn’t work because even if the ShoPage isn’t in the stack it just pop() to the previous page.
I used my solution with navParameters and it worked :slight_smile:


#12

Can’t you just setRoot(ShopPage)?


#13

No because my root is Tabs components. If i setRoot(ShopPage) I will not have my tabs at the bottom.


#14

Hmm. Maybe it makes sense to others, but I would find this a really confusing UX. If tabs are ever present, I expect them to always be present.


#15

Yeah it is the case! I was saying that if i setRoot(ShopPage) the tabs will no longer be present.


#16

You can try using:

this.navCtrl.getPrevious().id == “MyPage”