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

EDIT: Scratch that, turns out I needed/could use this._navController.present(loading).then( … ) to avoid dismissing before loading animation was done showing.

I’m getting the same error message, but in my case it happens if I do loading.dismiss() too quickly after doing this._navController.present(loading);

My request to productService.findOne() might be cached and return immediately, and that’s when the exeption is thrown.

    public ngOnInit(): void {
        let loading = Loading.create({
            content: 'Loading...'
        });
        this._navController.present(loading);

        console.log('before loading', this._navParams.data.id);

        //this._productService.clearCache();
        this._productService
            .findOne(this._navParams.data.id)
            .subscribe(
                (data) => {
                    console.log('loading success');
                    console.log(data);
                    this.product = data;
                    loading.dismiss();
                },
                (error) => {
                    console.log('Error loading product', error);
                    loading.dismiss();
                }
            );
    }

I am able to reproduce this in RC4.0

Cordova CLI: 6.4.0 Ionic Framework Version: 2.0.0-rc.4 Ionic CLI Version: 2.1.17 Ionic App Lib Version: 2.1.7 Ionic App Scripts Version: 0.0.47 ios-deploy version: Not installed ios-sim version: Not installed OS: macOS Sierra Node Version: v6.9.1 Xcode version: Xcode 8.2.1 Build version 8C1002

[What I Did] create a Loading as a share instance within my component and initialise the instance in constructor. So, various part of the component will call the .present() and .dismiss() of the same instance of Loading.

[How It Happen] -> call a method and present the Loading. -> method finish the task and dismiss the Loading. -> call another method and present the Loading. x-> throw error. Cannot read property ‘nativeElement’ of null

[How I Resolve] Do not initialise the Loading instance in constructor. Instead, initialise it every time before I .present() it.

Its not the best thing to do in term of programming practice. I hope the Ionic team will fix this.

@lucaspalencia I re-initialized the loading controller object everytime, we make a http.post and it worked for me. See if it works for you. loading = this.loadingCtrl.create({ content: ‘Loading’ }); init(){ this.loading = this.loadingCtrl.create({ content: ‘Loading’ }); }

And inside your http call, do this!

doHttpPost (){ this.init(); this.loading.present(); this.http.post(this.loginUrl, JSON.stringify(requestBody), {headers: headers}) .toPromise() .then(response => { this.auth.authLogin(type, userInfo.usuario, response.json().token); }) .catch(response => { this.loading.dismiss(); }); }

Cheers!

Updated to version 2.0.1 and still with the error, I have a method in my service with this code:

this.loading.present();
this.http.post(this.loginUrl, JSON.stringify(requestBody), {headers: headers})
 .toPromise()
 .then(response => {
    this.auth.authLogin(type, userInfo.usuario, response.json().token);
 })
 .catch(response => {
    this.loading.dismiss();
 });

The first time that my http.post executed this.loading.dismiss(); everything works ok, but if i try again the console returns the error:

Cannot ready property ‘nativeElement’ of null

Some help?

What’s the current consensus on the presentation/dismissal of loading spinners? The rc2 docs and this thread don’t really match at all. Should we use NavController or LoadingController? Is it dismiss() or dismissAll()? How should one prevent conflicts with other navigation events?

I have a tabbed app, where each tab’s data provider wants to fire a loading spinner when needed. It works fine on the home/root tab, but tapping any other tab spits out a Cannot read property 'nativeElement' of null error. I assume that means the nav action to the new tab hasn’t completed before the loading controller’s present() method fires off, maybe? If so, how do I tap into that, given it’s an automagic event?

Hello all! We are currently working on a refactor of the way “overlay components” like the loading component get pushed onto the stack. This should fix this issue. We may do a nightly that includes these changes soon and i will update this issue when that happens. Thanks!

I did many tests on the Loading Controller, and realized that to avoid this behavior, I had to create another instance of the object after call dismiss() on it.

I don’t know if it’s required, because the docs don’t explain that, but, to do the same tests that I did, follow this steps:

1 - Create a new object and assign this to a window property (previously defined on a typescript description file, otherwise it will not compile):

window.testLoading =  this.loadingCtrl.create({
    content: 'Please wait...'
});

2- compile and load the app on browser.

3 - after that, it’s simple, you have to call, on the console of the browser:

window.testLoading.present() -> the Loading will show correctly window.testLoading.dismiss() -> the Loading will dismiss correctly

After that, if I call the present() method on window.testLoading, I get the error: Cannot read property 'nativeElement' of null.

Here is the problem. So, if I want to call the present() method again on a Loading that I had called the dismiss() method before, I will get the error above.

To call the present() method, I had to first call the loadingCtrl to create a new instance on my window.testLoading property and only after that call the present() method.

Maybe this information will help the devs to correct the error. 😄

I’m using events to control the behavior of Loading Control:

this.loading = this.loadingCtrl.create({
    content:"Please wait..."
});

this.events.subscribe('ajax:start',()=>{
    this.loading.present();
});

this.events.subscribe('ajax:stop',()=>{
      this.loading.dismiss();
});

and I’m getting the following error: loading-transitions.js:52 Uncaught TypeError: Cannot read property 'nativeElement' of null

this is the full stacktrace, maybe it will help:

loading-transitions.js:52 Uncaught TypeError: Cannot read property 'nativeElement' of null(…)
LoadingMdPopIn.init @ loading-transitions.js:52
NavControllerBase._trnsStart @ nav-controller-base.js:406
(anonymous function) @ nav-controller-base.js:376
Transition.start @ transition.js:20
NavControllerBase._transition @ nav-controller-base.js:385
NavControllerBase._postViewInit @ nav-controller-base.js:295
NavControllerBase._viewTest @ nav-controller-base.js:348
NavControllerBase._nextTrns @ nav-controller-base.js:192
NavControllerBase._queueTrns.ti.resolve @ nav-controller-base.js:142
NavControllerBase._trnsFinish @ nav-controller-base.js:462
t.invoke @ polyfills.js:3
onInvoke @ ng_zone_impl.js:43
t.invoke @ polyfills.js:3
e.run @ polyfills.js:3
NgZoneImpl.runInner @ ng_zone_impl.js:70
NgZone.run @ ng_zone.js:231
(anonymous function) @ nav-controller-base.js:417
Animation._didFinish @ animation.js:511
Animation._didFinishAll @ animation.js:503
onTransitionEnd @ animation.js:207
onEvent @ dom.js:88
t.invokeTask @ polyfills.js:3
onInvokeTask @ ng_zone_impl.js:34
t.invokeTask @ polyfills.js:3
e.runTask @ polyfills.js:3
invoke @ polyfills.js:3

I tried to find a way to solve, but I was unable to solve it… ☹

My Ionic info:

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
ios-deploy version: Not installed
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v5.10.1
Xcode version: Xcode 8.0 Build version 8A218a

Hello all, you all are correct, setting dismissOnPageChange to true makes this issue still reproducible, sorry about that! @tonyawad88 as a workaround you can use the dismiss() method on the loading component. So it would just be {{name of your loader}}.dismiss(). Hope that makes sense! I will look into this more.

Hey all! Can you all try with this plunker? Looks like this issue is not reproducible anymore in our latest beta.7 release! http://plnkr.co/edit/IIfn2RKAMGheD8ISVr9A?p=preview I am going to close this for now, as it seems it was fixed. But if anyone can reproduce it again with beta.7 then i will reopen. Thanks for using Ionic everyone!

I have the same issue, though only when including the dismissOnPageChange: true parameter. (Does not throw an error if it’s set to false)