Ionic-framework: Overlay components cannot find the component to present from

[jgw96]

Short description of the problem:

Opening an overlay component in ionViewDidEnter never actually presents the component because the overlay cannot find the component that it should present from.

This is the NavPortal when opening an overlay component in ionViewDidEnter:

This is the NavPortal when opening an overlay component in a timeout in ionViewDidEnter:

Steps to reproduce:

1. Try to open an overlay component such as a loading or alert in ionViewDidEnter

Which Ionic Version? 2.0.0-beta.11

[jgw96]

Debugging notes: cant seem to reproduce this with the latest master

[jgw96]

Added a test for this with this pr: https://github.com/driftyco/ionic/pull/7606

[TheBrockEllis]

Since this issue was added to the beta.12 milestone, is it safe to bet that a fix won't be released until then? That's totally fine and understandable if that's the case- that's life working with (amazing) beta software. Are there any instructions anywhere on how to properly downgrade back to a previous beta version that would be recommended?

[jgw96]

@TheBrockEllis Good question! We normally do a few nightly releases before doing another full beta release, so the fix for this should be available before beta.12 (its already fixed on the master branch). Also, just so you know the workaround for this is to just wrap your logic that is in your ionViewDidEnter with a setTimeout. To downgrade back to beta.10 (although i would not recommend it as beta.11 has a ton of fixes for issues in beta.10) you can just follow the upgrade steps in our changelog backwards haha. Thanks for using Ionic! Finally, I added a test for this issue in my above pr (that has since been merged) so that we can watch out for this issue in the future.

[TheBrockEllis]

Thanks a bunch, @jgw96! I'm working on 3 separate ionic apps right now and use the loading component pretty extensively. I'll move forward and use the setTimeout with the Loading component inside of the ionViewDidEnter page event. I'll also start migrating a lot of the logic out of my Page's constructors and into the page event instead. Thanks so much for all the helps, the tips and all the community work you do here.

[jgw96]

Thanks for all the kind words! 😃

[jgw96]

Hmmm, does not seem to be fixed in the latest nightly, will be looking further into this.

[orthodoc]

When I set the type to LoadingController tslint complains about not being able to assign type Loading to LoadingController. I am not sure if this is related to this issue or if it is a linting problem!!

Setting the type to any seems to load the current page, but when navigating to another page with a loading component, an error exception:

browser_adapter.js:84 EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'create' of undefined

Makes the Loading component unusable.

[Kobzol]

LoadingCtrl = handles creating loading views
Loading = instance of a loading view
You shouldn't have problem with TS lint if you do this:

let l:Loading = loadingCtrl.create(...);
l.present();

[orthodoc]

Setting the type as Loading helped. The problem was I was not importing it from ionic-angular. Looks like I had replaced Loading with LoadingController, instead of adding it in.

Thanks for pointing out that one. @Kobzol

[gxsjtu]

is there a schedule for fixing the issue?
the loadingcontroller caused my app black screen for 1 -2 second on ios device when transfer to another page.

[jgw96]

Note to team: this seems to be isolated to tabs apps, cant seem to repro with the test i added or a sidemenu app, but can repro with a tabs starter.

[EralpB]

Can anyone point out a hack around this? setTimeout?

[jgw96]

@EralpB the current workaround is to put your ionViewDidEnter logic in a setTimeout. Sorry for any hassle this issue causes for you!

[danillobarbosa]

ngOnInit() {
let loading: Loading = this.presentLoading('Carregando notícias');
this.getNoticias(5, 0)
.then(res => {
this.noticias = res;
loading.dismiss();
});
}

presentLoading(texto: string): Loading {
let loader: Loading = this.loadingController.create({
content: texto
});
setTimeout(() => {
loader.present();
}, 300);
return loader;
}

workaround...

[uditguru]

loadingCtrl.create is throwing the following error suddenly

(index):29 Uncaught EXCEPTION: Error in build/pages/page1/page1.html:13:21 ORIGINAL EXCEPTION: TypeError: Cannot read property 'create' of undefined ORIGINAL STACKTRACE: TypeError: Cannot read property 'create' of undefined at Page1.findCentre (http://localhost:8100/build/js/app.bundle.js:230:39) at DebugAppView._View_Page10._handle_click_20_0 (Page1.template.js:502:28) at http://localhost:8100/build/js/app.bundle.js:32355:24 at http://localhost:8100/build/js/app.bundle.js:45802:36 at http://localhost:8100/build/js/app.bundle.js:45888:111 at ZoneDelegate.invoke (http://localhost:8100/build/js/zone.js:323:29) at Object.onInvoke (http://localhost:8100/build/js/app.bundle.js:37722:41) at ZoneDelegate.invoke (http://localhost:8100/build/js/zone.js:322:35) at Zone.runGuarded (http://localhost:8100/build/js/zone.js:230:48) at NgZoneImpl.runInnerGuarded (http://localhost:8100/build/js/app.bundle.js:37755:78) ERROR CONTEXT: [object Object] http://localhost:8100/build/js/zone.js Line: 260

tried various workarounds but can't seem to fix
please help at the earliest

[jgw96]

Hello all! Thanks for all the info. I am happy to report that this has been fixed and will be in the beta.12 release. Thanks for using Ionic!