Ionic-framework: Ionic 2 RC0 up : Cant get active component name and overriding back button breaks popover navigation

[uzumakinaruto123]

Short description of the problem:

Overriding back button functionality. can't get active components name since ionic rc0 update . Component name is required to decide on which page to go.

I have mentioned specific use case for my app https://forum.ionicframework.com/t/how-to-get-current-active-component-in-rc0/67468

Till beta , getting component ame was possible. In RC0 , it always returns 't' due to minification.

As bengtler suggested , I tried this : (which is enough for my use case)

let firstView : any;
firstView = this.nav.first();
if(this.nav.isActive(firstView)){
     console.log('first tab active');
  }else{
      console.log('Go to first tab');
}

But , above does not work. It always logs 'first tab active'

Overriding back button also breaks popover navigation. if popover is open , and user hits back then popover won't close instead it will navigate and popover still remains open.

What behavior are you expecting?

A method which would return just a active component name (even after minification) and specifying whether any overlay element like popover is active on that component.

This will make a lot of things easy.

Steps to reproduce:

1. start a RC0 app.
2. Override back button , and get active viewcontroller.
3. Run on device

Theres no way to know what component is active from returned viewcontroller result.

Run ionic info from terminal/cmd prompt: (paste output below)

Cordova CLI: 6.3.1
Gulp version:  CLI version 3.9.1
Gulp local:
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
OS:
Node Version: v4.1.0

[jgw96]

Hello, thanks for using Ionic! So just to be clear you can still get the name of the component but when the code is minified (prod build) it is always t right?

[uzumakinaruto123]

yes , right !

For now , I am using title to identify pages , like below

let activeChildNav :any = this.navCtrl.getActiveChildNav();
if(activeChildNav['_app']['_title']=='HomePageTitle'){

}

But , it won't work for every use case , when titles are going to dynamic.

[movrack]

I have the same error.
When js is uglyfied, name is replaced by "t".

As workarround, I will override uglification process at build time to don't uglify.

[ruben0909]

Hi
I know is late but could be useful for someone
let activeView = this.navCtrl.getActive(); if (activeView.component == ConversationPage) { }

[hllorens]

@ruben0909 why would that fix the issue? I got the problem with .name property and it seems to work with the .component property.

[julien-tmp]

If it can help, I am using something of this type if(this.nav.getActive().component == this.pages[0].component)

[BatMen]

Thank you. Wondering why my application wasn't working on production server.

I'm using @ruben0909 solution

this.navCtrl.getActive().component == MyComponentClass

[kamok]

I believe you can also do this.nav.getActive().instance instanceof MyPage

[prantikv]

yes, the uglify is messing up string values of the component name.

Currently using the page title name as follows.
this.viewCtrl.instance.navCtrl._app._title

There are times when the page title is dynamically generated, this messes up handling the back button.

Had to rewrite my navigation and button handling as this bug only shows up when using --prod flag during build.

Please post any other/ the correct method to get page name.

-Thanks

[omgalbert]

+1 . My view name is always "e".

[prantikv]

@jgw96 any update on this? Any way to get view name so it is easy to handle back button and other navigation scenarios.
If not what other things you recommend for it. And yes, I do want to use uglify for security and file size.

[derasmus]

+1

[zarko-tg]

In the meantime I found a workaround (for an app which is wired using lazy loading). It works just fine also for builds made using the --prod flag.

openPage(page) {
  if (this.isPageAlreadyActive(page)) {
    return;
  }
  this.nav.setRoot(page.component);
}

private isPageAlreadyActive(page): boolean {
  return this.nav.getActive().pageRef().nativeElement.tagName === `PAGE-${page.component.toUpperCase()}`;
}

Hoping Ionic folks will show some love for this bug as I believe there are and will be many wondering why a page is reloaded if you tap on the same (its own) navigation icon/menu item.

[arthurflor23]

+1
Same problem here..
Returning "t"

[vaibhav915]

same problem
It returns 't'

[IvanLencina]

@zarko-tg Your solution works in production and dev versions. Thanks!

[troyanskiy]

I'm handling that like that.

1. Every page contain public static readonly pageName = 'MyBestPage';
2. Than it's easy to check this.nav.getActive().component.pageName === 'MyBestPage';

I think that way is more clear.

[cmolina]

I'd love to see the pageName attribute automagically assigned by @IonicPage(), for example.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!