Tabs.select(idx), receive error "Cannot read property 'length' of null"

[KindTech]

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x ] 3.x

I'm submitting a ... (check one with "x")
[ x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

When setting a tab programmatically via Tabs.select(idx), receive error "Cannot read property 'length' of null" at Tab.NavControllerBase.getActive at Tabs.select

If change tabs by tapping the tab it works fine.

Difficulty: it only happens on first open of the app after clean install. If I close the app and reopen it works fine. Happens on both IOS and Android. Not encountering any other errors prior to it.

Expected behavior:
It should change the tab.

Steps to reproduce:

Related code:

relevant code on child of tabs

@IonicPage({ priority: 'high'})
@Component({
  selector: 'page-businesses-page',
  templateUrl: 'businesses-page.html',
  encapsulation: ViewEncapsulation.None,
  providers: [MapPinService]
})
...
export class BusinessesPage {
...
@ViewChild(Content) content: Content;
  constructor(
...
private navCtrl: NavController,
private evts:Events
...
)
...
ngOnInit(): void {
...
    this.evts.subscribe('tabs:changetab',(data)=>{

        var t: Tabs = this.navCtrl.parent;
        t.select(data.tabIndex);

    });
  }

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

cli packages: (c:\ProjectCode\app\main\node_modules)

    @ionic/cli-plugin-cordova       : 1.6.2
    @ionic/cli-plugin-ionic-angular : 1.4.1
    @ionic/cli-utils                : 1.7.0
    ionic (Ionic CLI)               : 3.7.0

global packages:

    Cordova CLI : 7.0.0

local packages:

    @ionic/app-scripts : 1.3.12
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.1.1

System:

    Node : v7.4.0
    OS   : Windows 10
    npm  : 4.1.1

[mastronaute]

Same here, only difference is that I use @ViewChild(Tabs) tabs: Tabs;

[mastronaute]

After debugging it looks like in the function Tabs.prototype.select the following call is made currentPage = currentTab.getActive();
Details of this function is:

NavControllerBase.prototype.getActive = function () {
        return this._views[this._views.length - 1];
    };

In my case, this._views is null

[dbachorz]

I have the same problem. Any more ideas?

[jgw96]

Hello all, thanks for using Ionic! We will look into this.

[zamecki]

I manage to get it working with @ViewChild('myTabs') tabs: Tabs;

<ion-tabs #myTabs>
  <ion-tab [root]="tab1Root" tabTitle="Cadastro" tabIcon="magnet"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Listagem" tabIcon="book"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Sobre" tabIcon="information-circle"></ion-tab>
</ion-tabs>

import { NavController, Platform, Tabs } from  'ionic-angular';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  
  @ViewChild('myTabs') tabs: Tabs;

  tab1Root: any = CadastroPage;
  tab2Root: any = ListagemPage;
  tab3Root: any = SobrePage;
  
  constructor(private nav: NavController,
              private platform: Platform) {      
      platform.registerBackButtonAction(
        () => {
          if(nav.canGoBack()){
            nav.pop();
          }else {        
            this.tabs.select(0);
          }
        }
      );
  }
}

cli packages: (E:\RV\node_modules)

    @ionic/cli-plugin-cordova       : 1.6.1
    @ionic/cli-plugin-ionic-angular : 1.4.1
    @ionic/cli-plugin-proxy         : 1.4.1
    @ionic/cli-utils                : 1.7.0
    ionic (Ionic CLI)               : 3.7.0

global packages:

    Cordova CLI : 7.0.1

local packages:

    @ionic/app-scripts : 1.3.12
    Cordova Platforms  : android 6.2.3 browser 4.1.0
    Ionic Framework    : ionic-angular 3.5.0

System:

    Android SDK Tools : 25.2.5
    Node              : v6.10.3
    OS                : Windows 10
    npm               : 5.2.0

[mastronaute]

I made some upgrades this morning and it does work now on my side too:

cli packages: 
    @ionic/cli-plugin-cordova       : 1.6.2
    @ionic/cli-plugin-ionic-angular : 1.4.1
    @ionic/cli-utils                : 1.7.0
    ionic (Ionic CLI)               : 3.7.0

global packages:

    Cordova CLI : 7.0.1 

local packages:

    @ionic/app-scripts : 1.3.12
    Cordova Platforms  : android 6.2.3 ios 4.4.0
    Ionic Framework    : ionic-angular 3.2.1

[KindTech]

Tried switching to ViewChild as per zamecki. I still have the issue on first open after clean install. Closing and reopening app fixes it.

[zamecki]

@KindTech Could you post some code?

[stellasoft-charlie]

Any progress on this? Could really do with a fix

[KindTech]

I was unable to post code due to project deadlines. I worked around it by calling a click event on the tab button directly.

[mastronaute]

Very problematic for us too

[mastronaute]

@KindTech How did you processed exactly ? Could you provide some code please ? That would help a lot.

[akashbiz]

+1 , facing same issue. Any updates?

[KindTech]

as noted, I worked around it by using an event and calling the click event on the actual tab. I'm not happy about it but was under deadline. Note, if you use an event, you have to subscribe on the tabs page because the child pages may not have loaded yet and in that case will not be able to receive the event.

In my tabs page:

export class TabsPage {

@ViewChild('tabs') tabs:Tabs;

  shareTabRoot: any = SharePage;
  subscribeTabRoot: any = SubscribePage;
  listTabRoot: any = BusinessesPage;

  mySelectedIndex: number;

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private evts:Events,
    private renderer:Renderer
  ) {
    this.evts.subscribe('tabs:changetab',(data)=>{        

        try{
          this.tabs.select(data.tabIndex);
        }
        catch(ex){
          //HACK: this sucks a lot. For some reason on first load of the app,
          //the views are not loaded into the ViewControllerBase. It's a bug in ionic.
          //This causes tabs.select to fail.
          //as a recourse, I am calling the click method on the actual tab element
          //this is totally brittle and likely to break in a subsequent release of ionic.
          //sorry.
          let tabid = 'tab-t1-'+data.tabIndex;
          document.getElementById(tabid).click();
        }
      this.mySelectedIndex = data.tabIndex;
    });
    this.mySelectedIndex = navParams.data.tabIndex || 0;
  }