Ionic v2 - Loading Service - Throwing error "cannot read property 'nativeElement' ..."

[tonyawad88]

Short description of the problem:

I have a welcome page that invokes the Loading service in its constructor. As soon as the page loads for the first time the error / exception is thrown.

What behavior are you expecting?

No exceptions thrown.

Steps to reproduce:

1. Create a new ionic project ionic start MyIonic2Project tutorial --v2 --ts
2. On the root page, add in its constructor the following:

import {Page,Loading,NavController} from 'ionic-angular';
@Page({
  templateUrl: 'build/pages/hello-ionic/hello-ionic.html'
})
export class HelloIonicPage {
  constructor(private nav: NavController) {
    this.nav =nav;
    let loading = Loading.create({
      content: "Please wait...",
      duration: 3000,
      dismissOnPageChange: true
    });
    this.nav.present(loading);
  }
}

3 . Check the console for the exception

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

browser_adapter.ts:73 STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.ts:73ExceptionHandler.call @ exception_handler.ts:52(anonymous function) @ application_ref.ts:258schedulerFn @ async.ts:127SafeSubscriber.__tryOrUnsub @ Subscriber.js:166SafeSubscriber.next @ Subscriber.js:115Subscriber._next @ Subscriber.js:74Subscriber.next @ Subscriber.js:51Subject._finalNext @ Subject.js:124Subject._next @ Subject.js:116Subject.next @ Subject.js:73EventEmitter.emit @ async.ts:113NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng_zone.ts:134NgZoneImpl.inner.inner.fork.onHandleError @ ng_zone_impl.ts:88ZoneDelegate.handleError @ angular2-polyfills.js:336Zone.runGuarded @ angular2-polyfills.js:244NgZoneImpl.runInner @ ng_zone_impl.ts:97NgZone.run @ ng_zone.ts:204NavController._afterTrans @ nav-controller.js:1003(anonymous function) @ nav-controller.js:979Animation._didFinish @ animation.js:590Animation.play @ animation.js:264(anonymous function) @ nav-controller.js:990ZoneDelegate.invoke @ angular2-polyfills.js:332Zone.run @ angular2-polyfills.js:227NgZoneImpl.runOuter @ ng_zone_impl.ts:98NgZone.runOutsideAngular @ ng_zone.ts:218NavController._beforeTrans @ nav-controller.js:948NavController._postRender @ nav-controller.js:930(anonymous function) @ nav-controller.js:865(anonymous function) @ nav-controller.js:1217promiseReactionJob @ es6-shim.js:2171(anonymous function) @ es6-shim.js:2159Item.run @ browser.js:64drainQueue @ browser.js:34ZoneDelegate.invokeTask @ angular2-polyfills.js:365NgZoneImpl.inner.inner.fork.onInvokeTask @ ng_zone_impl.ts:54ZoneDelegate.invokeTask @ angular2-polyfills.js:364Zone.runTask @ angular2-polyfills.js:263ZoneTask.invoke @ angular2-polyfills.js:431
browser_adapter.ts:73 TypeError: Cannot read property 'nativeElement' of undefined
    at new LoadingMdPopOut (http://localhost:8101/build/js/app.bundle.js:44356:40)
    at Function.Transition.createTransition (http://localhost:8101/build/js/app.bundle.js:63476:16)
    at http://localhost:8101/build/js/app.bundle.js:46769:58
    at ZoneDelegate.invoke (http://localhost:8101/build/js/angular2-polyfills.js:332:29)
    at Zone.run (http://localhost:8101/build/js/angular2-polyfills.js:227:44)
    at NgZoneImpl.runOuter (http://localhost:8101/build/js/app.bundle.js:26898:71)
    at NgZone.runOutsideAngular (http://localhost:8101/build/js/app.bundle.js:26817:80)
    at Portal.NavController._beforeTrans (http://localhost:8101/build/js/app.bundle.js:46759:20)
    at Portal.NavController._postRender (http://localhost:8101/build/js/app.bundle.js:46741:14)
    at Portal.NavController._render (http://localhost:8101/build/js/app.bundle.js:46657:18)
  -------------   Elapsed: 77 ms; At: Sun Apr 17 2016 13:54:49 GMT-0400 (EDT)   -------------  
    at Object.Zone.longStackTraceZoneSpec.onScheduleTask (http://localhost:8101/build/js/angular2-polyfills.js:1354:23)
    at ZoneDelegate.scheduleTask (http://localhost:8101/build/js/angular2-polyfills.js:342:50)
    at Zone.scheduleMacroTask (http://localhost:8101/build/js/angular2-polyfills.js:283:40)
    at http://localhost:8101/build/js/angular2-polyfills.js:133:26
    at setTimeout (eval at createNamedFn (http://localhost:8101/build/js/angular2-polyfills.js:973:18), <anonymous>:3:37)
    at process.nextTick (http://localhost:8101/build/js/app.bundle.js:64854:9)
    at enqueuePromiseReactionJob (http://localhost:8101/build/js/app.bundle.js:37073:7)
    at fulfillPromise (http://localhost:8101/build/js/app.bundle.js:37099:9)
  -------------   Elapsed: 52 ms; At: Sun Apr 17 2016 13:54:49 GMT-0400 (EDT)   -------------  
    at Object.Zone.longStackTraceZoneSpec.onScheduleTask (http://localhost:8101/build/js/angular2-polyfills.js:1354:23)
    at ZoneDelegate.scheduleTask (http://localhost:8101/build/js/angular2-polyfills.js:342:50)
    at Zone.scheduleEventTask (http://localhost:8101/build/js/angular2-polyfills.js:286:40)
    at zoneAwareAddEventListener (http://localhost:8101/build/js/angular2-polyfills.js:880:11)
    at XMLHttpRequest.addEventListener (eval at createNamedFn (http://localhost:8101/build/js/angular2-polyfills.js:973:18), <anonymous>:3:43)
    at XMLHttpRequest.desc.set [as onload] (http://localhost:8101/build/js/angular2-polyfills.js:776:19)
    at XHRImpl.get (http://localhost:8101/build/js/app.bundle.js:30356:20)
    at TemplateNormalizer.normalizeTemplate (http://localhost:8101/build/js/app.bundle.js:10294:30)
  -------------   Elapsed: 327 ms; At: Sun Apr 17 2016 13:54:49 GMT-0400 (EDT)   -------------  
    at Object.Zone.longStackTraceZoneSpec.onScheduleTask (http://localhost:8101/build/js/angular2-polyfills.js:1354:23)
    at ZoneDelegate.scheduleTask (http://localhost:8101/build/js/angular2-polyfills.js:342:50)
    at Zone.scheduleMacroTask (http://localhost:8101/build/js/angular2-polyfills.js:283:40)
    at http://localhost:8101/build/js/angular2-polyfills.js:133:26
    at setTimeout (eval at createNamedFn (http://localhost:8101/build/js/angular2-polyfills.js:973:18), <anonymous>:3:37)
    at process.nextTick (http://localhost:8101/build/js/app.bundle.js:64854:9)
    at enqueuePromiseReactionJob (http://localhost:8101/build/js/app.bundle.js:37073:7)
    at Promise.then (http://localhost:8101/build/js/app.bundle.js:37438:11)

Which Ionic Version? 2.x

Plunker that shows an example of your issue

http://plnkr.co/edit/fA0KB70ggJd0nptNvYpl?p=preview

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

WARN: ionic.config.js has been deprecated, you can remove it.

Your system information:

Cordova CLI: 6.0.0
Gulp version:  CLI version 3.9.0
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.4
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
ios-deploy version: 1.8.2 
ios-sim version: 5.0.3 
OS: Mac OS X El Capitan
Node Version: v0.12.7
Xcode version: Xcode 7.3 Build version 7D175 

[YannKauderer]

Hey guys this issue is still happening on latest version when calling this.loading.show() for me :/ any workarounds or solutions found ?

[ghost]

I have already answered it a year ago... Ionic mixes callbacks from a web worker thread which are then sent via callbacks to the app. This means you cannot simply show a progress dialog or do practically anything as long as you're not in main thread. Instead you must use NG-ZONE as so:

import {ViewChild, Component, NgZone} from '@angular/core';

....

constructor( private zone: NgZone )

...

observer_callback() { this.zone.run( () => { // Congrats - you're in main thread now. Stupid things won't happen anymore. } ); }

With Regards,

Rubi Mazaki Email: rubimazaki@gmail.com

On Thu, May 4, 2017 at 2:27 PM, YannKauderer notifications@github.com wrote:

Hey guys this issue is still happening on latest version when calling this.loading.show() for me :/ any workarounds or solutions found ?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/driftyco/ionic/issues/6209#issuecomment-299159230, or mute the thread https://github.com/notifications/unsubscribe-auth/ABw6-TbsdHIUu6vTmvDbAmFmP8NF44VJks5r2bYjgaJpZM4IJOHs .

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. 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.