Ionic-framework: [v2 beta.11] LoadingController broken with Tabs on default Tab

[dkobia]

Something broke between 2.0.0-beta.10-201608041720 and 2.0.0-beta.10-201608051404 on the updated LoadingController component.

Steps to reproduce:

1. Set a tabs page as root
2. Add a Loading component to the default selected tab
3. Run loading.present()

I'm running into this error: EXCEPTION: Error: Uncaught (in promise): TypeError: activeNav.getActive is not a function. Running through the trace, it looks like Loading can't figure out the current view. Note that this does not happen with 2.0.0-beta.10-201608041720 the previous version.

Cordova CLI: 6.3.0
Gulp version:  CLI version 3.9.1
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.10-201608051404
Ionic CLI Version: 2.0.0-beta.36
Ionic App Lib Version: 2.0.0-beta.19
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v6.2.0
Xcode version: Xcode 7.3.1 Build version 7D1014

[sferey-old]

I have same error with ionic v2 beta.11
My ionic info

Your system information:

Cordova CLI: 6.3.0
Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.0.0-beta.36
Ionic App Lib Version: 2.0.0-beta.19
OS:
Node Version: v6.3.0

Error with ionic run android

[LloydVincent]

I was having this EXCEPTION: Error: Uncaught (in promise): TypeError: activeNav.getActive is not a function error also upon upgrading to beta 11, but only on Android.

In my case, I was using a modal to show a start page, and calling it in ngOnInit(). Moving my code to ionViewDidEnter() seems to have solved the problem.

[jgw96]

Hello all! Thanks for opening an issue with us! @dkobia are you also using the angular lifecycle event ngOnInit() like @LloydVincent ? If so would you mind moving your logic to ionViewDidEnter ? In Ionic 2 you should try to stick with using our lifecycle events instead of the default angular lifecycle events as much as possible. Thanks for using Ionic!

[nickwinger]

I also have this issue with beta 11.
I guess it relates to using the LoadingController inside a service but not a Component.
What's the best practive way to do this ? I guess this is a common wish:
I have an Ajax-Service which i register as a singleton inside app.ts at the bootstrap function.
So i can inject it everywhere i need it.
Inside the Ajax-Service, everytime i do certain Ajax-Requests i show a Loading.
I guess when the LoadingController gets injected into the Ajax-Service at the bootstrap, there is no nav/view whatever, therefore i get the error.
But is it good practice to inject a new Ajax-Service into every Component, instead of sharing a singleton in memory, just to get the current nav ?
Before beta-11 everything worked fine, as i was using app.getActiveNav inside the ajax-Service and therefore had a reference to the active nav to present the loading (and modals, alerts, etc.)
Another sidenote: the Ajax-Service is also used inside other singletons (i have a so called RootModel (or UnitOfWork if you will)) and there it's only @Injectable where you cannot register providers...

Please help me out of here, i have no clue what's the way to do it now, but i guess it's a common thing to have an Ajax-Service displaying alerts, loadings etc.

Thanks.

[dkobia]

@jgw96 @LloydVincent I already tried both the angular and ionic lifecycle events ngOnInit() and ionViewDidEnter and both have different results:

• ngOnInit() throws the same error I have above
• ionViewDidEnter script dies at loading.present()

ionics lifecyle events for this problem work perfectly in the version just before re: 2.0.0-beta.10-201608041720. As I mentioned this is an issue exclusive to the latest release.

[dkobia]

I can demo this but no ionic-angular beta 11 plnkr.

[LatisVlad]

I am also experiencing this issue in a tab page.

 constructor(private loadingCtrl: LoadingController) {
        var loading = this.loadingCtrl.create({
            content: 'Please wait...',
            duration: 0,
            dismissOnPageChange: true
        });
        loading.present();
    }

[jephtta]

Same issue with v2 beta.11
I noticed that putting loading.present() inside a long enough timeout (something around 500ms) removes the error. The loader still doesn't show though.

[jgw96]

Hello all! Thanks for all the info. I was able to reproduce this issue now and will be opening a tracking issue for it. Thanks for using Ionic! Once i create the tracking issue i will link to it here and close this one.

[jgw96]

related https://github.com/driftyco/ionic/issues/7605

[TheBrockEllis]

I am having the same issue, but I am not using any lifecycle events.

1. Ionic app is bootstrapped
2. In app.ts, this.rootPage = TabsPage
3. TabsPage sets the tab1Root to SchoolMenu and tab2Root to PersonalMenu component
4. In the constructor of the SchoolMenu component, I've refactored the loading component to use it's controller to present, like:

import {LoadingController} from 'ionic-angular'

constructor(private loading:LoadingController) {
    console.log("#1 - Loading here?");
    let loader = this.loading.create();
    loader.present();
    console.log("#2 - Also here?");
}

When running ionic serve I see the first console log and then immediately afterwords this error:

Loading here?
browser_adapter.js:93 EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in ./SchoolMenu class SchoolMenu_Host - inline template:0:0
ORIGINAL EXCEPTION: TypeError: activeNav.getActive is not a function
ORIGINAL STACKTRACE:
TypeError: activeNav.getActive is not a function
    at NavPortal.NavControllerBase._insert (http://localhost:8100/build/js/app.bundle.js:62248:34)
    at NavPortal.NavControllerBase.insertViews (http://localhost:8100/build/js/app.bundle.js:62186:33)
    at App.present (http://localhost:8100/build/js/app.bundle.js:54166:29)
    at Loading.present (http://localhost:8100/build/js/app.bundle.js:60174:26)
    at new SchoolMenu (http://localhost:8100/build/js/app.bundle.js:2081:16)
    at DebugAppView._View_SchoolMenu_Host0.createInternal (SchoolMenu.template.js:23:26)
    at DebugAppView.AppView.create (http://localhost:8100/build/js/app.bundle.js:34181:21)
    at DebugAppView.create (http://localhost:8100/build/js/app.bundle.js:34393:44)
    at ComponentFactory.create (http://localhost:8100/build/js/app.bundle.js:33251:36)
    at http://localhost:8100/build/js/app.bundle.js:62936:49
ERROR CONTEXT:
[object Object]

This process was working before this morning when I updated to beta.11. Am I missing something?

Ionic Info Output:

Cordova CLI: 6.2.0
Gulp version:  CLI version 3.9.1
Gulp local:   Local version 3.9.1
Ionic CLI Version: 1.7.16
Ionic App Lib Version: 0.7.3
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v4.4.5
Xcode version: Xcode 7.3.1 Build version 7D1014

EDIT:

Also, placing the loader.present() and loader.dismiss() into setTimeouts of differing lengths does seem to eliminate the error.

[ranli]

I am having the same issue v2 beta.11

`import {Component} from '@angular/core';
import {ModalController} from 'ionic-angular';
import {HomePage} from '../home/home';

@Component({
templateUrl: 'build/pages/home/usercenter.html'
})
export class UserCenter {

constructor(public modalCtrl: ModalController){
    this.modalCtrl = modalCtrl;
    if(localStorage.getItem("Logined") == "true"){
        console.log("aaa");
    }else{
        let modal = modalCtrl.create(HomePage);
        modal.present();
    }
}

}`

And this only happens when I use the modal component in constructor.
so it works fine when I move the code into a fucntion,

`export class UserCenter {

constructor(public modalCtrl: ModalController){
    this.modalCtrl = modalCtrl;

}
onPageDidEnter(){
    if(localStorage.getItem("Logined") == "true"){
            console.log("aaa");
        }else{
            let modal = this.modalCtrl.create(HomePage);
            modal.present();
        }
}

}`

`Ionic Info Output:

Cordova CLI: 6.3.0
Ionic CLI Version: 2.0.0-beta.35
Ionic App Lib Version: 2.0.0-beta.19
OS:
Node Version: v4.4.7

[ganySA]

+1

[danielehrhardt]

+1

[ChezRD]

+1

[Natanael1234]

LoadingController not working for me too.

[versantweb]

Not working for me neither...

[jgw96]

Hello all! We are tracking this issue on #7605 . Thanks!

[lagear]

LoadingController not working for me too.

ionViewLoaded() {
if (DatosUsuario.estaAutenticado()) {
let loading = this.loadingController.create({
content: "Por favor espere...",
dismissOnPageChange: true
});
////loading.present();
this.inicioService.obtenerInicio().then(
data => {
////loading.dismiss();
this.mostrar(data);
}
);
}
}

[danillobarbosa]

Not working for me too.

[tobiasfiechter]

I'm experiencing the same issue.

[geo242]

Same here, however, there is a hacky work around...
setTimeout(() => { let loader = this.loadingCtrl.create({ content: "Please wait..." }); loader.present(); doStuffAndThings() .then(() => { loader.dismiss(); }); }, 0);

[eddyng8]

I had the same issue with beta 11. And this is my workaround:

let loading = this.loadingCtrl.create({ content: 'Please wait...' }); try { loading.present(); } catch (e) { }

I even put the above code in my service class. It won't launch the loading panel when you fire up your app. But it will as soon as everything settles in.