Ionic v2 - Loading Service - Throwing error "cannot read property 'nativeElement' ..." #6209
Comments
|
Hello @tonyawad88, are you using this Loading service, to load resources before your app starts rendering? I guess I stumbled uppon the same requirement and opened a more general question/request. Maybe you have a look and could link these issues, if they are similar to you? |
|
@ataraxus Hii, I don't think they are related. I am able to create a barebone ionic 2 plunker and replicate the issue I am having with my app. |
|
I have the same issue, though only when including the |
|
I encounter the same error, it seems that it happens when I try to dismiss the loading dialog "too quickly", e.g. when I get data out a cache instead of doing a HTTP request. |
|
Thanks for the info everyone! I am able to reproduce this and we are now looking further into this. |
|
Here is a workaround that I was able to get to work: |
|
I am having the same issue when trying to use the loading component at a global level. If anyone else is having trouble with that, you might consider this until this bug is resolved at least: http://www.joshmorony.com/how-to-create-a-custom-loading-component-in-ionic-2/ |
|
Here is a plunker that is using loading in a global way. http://plnkr.co/edit/3TfK76XpqsnUvW3dQuG3?p=preview I had to do some trickier things in my implementation because I am using EventEmitters to indicate when an http request is started and when it has completed. Im still having a few issues with it but if I wrap the |
|
@jgw96 Hi Justin, do you have any workaround to dismiss the loading popup manually from javascript ? Calling loading.dismiss() is always throwing the 'nativeelement' error. Thanks |
|
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! |
|
@jgw96 I can still reproduce in beta 7. Enable the following property on Loading, and it will throw the 'native element' exception. Any idea how to dismiss the loading from JS ? The use case in the plunker, where we use I wonder if there is any event that we can emit to dismiss the "Loading" ? Thank you ! |
|
@jgw96 Seems like a race condition or a digest type issue. When adding the |
|
@tonyawad88 I am using EventEmitter to handle the dismissing of the loading component. |
|
Hello all, you all are correct, setting |
|
@tonyawad88 to be more specific here is what I am doing. (currently on beta6) httpRequestEventEmitter: EventEmitter<string>;
httpResponseEventEmitter: EventEmitter<string>;
private sendHttpRequest(request: Request, event: string): Observable<any> {
return Observable.of(request)
.do((req: Request) => { this.httpRequestEventEmitter.emit(event + '-request-started'); })
.flatMap((req: Request) => { return this.http.request(req); })
.finally(() => {
this.httpResponseEventEmitter.emit(event + '-request-finished');
});
}In app.ts: this.service.httpRequestEventEmitter.subscribe(
(data: string) => {
this.loading = Loading.create({
dismissOnPageChange: true
});
this.app.getComponent(ROOT_NAV).present(this.loading);
}
);
this.service.httpResponseEventEmitter.subscribe(
(data: string) => {
this.loading.dismiss();
}
); |
|
@keithdmoore Just to let you know we deprecated app.getComponent in beta.7 in favor of the native Angular 2 ViewChild decorator https://angular.io/docs/ts/latest/api/core/ViewChild-var.html . |
|
@jgw96 Ok. Thanks. Seems like I did see a use of ViewChild in the ionic-conference app. Thanks for the heads up! I am about to upgrade right now. |
|
No problem! Let me know how the beta.7 update goes for you! Here are some awesome instructions to help you with the upgrade: https://github.com/driftyco/ionic/blob/2.0/CHANGELOG.md#angular-update-to-200-rc1 |
|
@keithdmoore @jgw96 It sure looks like a race. For now adding a settimeout of 500ms, around creating the "loading" prevents it from firing the exception. Check this plunker out, if you display / hide the loading using the buttons, no exceptions occurs. Thank you ! |
|
You might try using: |
|
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 My request to productService.findOne() might be cached and return immediately, and that's when the exeption is thrown. |
|
@keithdmoore same issue with "ngAfterViewInit". |
|
same issue |
|
Hi, I don't know if you had same problem like mine, I had this Every time an event occurs. I was calling it previously inside constructor (obviously the call happens once with constructor) Hope it helps |
|
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): 2- compile and load the app on browser. 3 - after that, it's simple, you have to call, on the console of the browser:
After that, if I call the Here is the problem. So, if I want to call the To call the Maybe this information will help the devs to correct the error. 😄 |
|
Same in nightly version ! Calling |
|
Currently, once you call ViewController.dismiss(), that ViewControler (toast, alert, actionsheet) is invalidated, you can't use it more than once. |
|
@risleylima exactly the same behavior. As a workaround you can do this: Just create loader every time you want to use it, in my case right after modal dismissed. I'm not sure how this can make an impact on memory, but I can't find another solution for now. |
|
I have the same problem with RC4 This throws Thanks |
|
The problem you are getting into, is the result of a wrong thread context - or as named by angular - zone or NgZone. Your this pointer can be null or even undefined, as happened to me and a number of other commenters above. How to resolve: My practice - which I guess is the way handling multithreaded code is intended to be - is handle callbacks from any of the following types of "services" (and any other suspicious service...):
How to handle:
Example: |
|
Hi all, also a litte late... but: I had the same error msg and I forgot simply to resolve(result) at my Promise in the Service ;-) maybe it will help someone... |
|
Hello all! This has been fixed here #9747 and will be in the next release. Thanks for using Ionic! |
|
Is this fixed on RC5? on RC4 it's still happening, not only on the promise but just creating it. update: in RC5 still reproducing it: EXCEPTION: Error in ./LoginPage class LoginPage - inline template:19:4 caused by: Cannot read property 'nativeElement' of null |
|
I am able to reproduce this in RC4.0
[What I Did] [How It Happen] [How I Resolve] Its not the best thing to do in term of programming practice. I hope the Ionic team will fix this. |
|
I'm experiencing the same issue with opening an action sheet. If I try to open the same instance for a second time I get the cannot read property nativeelement of null error. Workaround is to create a new instance everytime I want to present it. Which seems like a bad idea, but I don't know how to solve it otherwise. |
|
Same problem with elements in [ngSwitch] switching by ion-segment component |
|
Updated to version 2.0.1 and still with the error, I have a method in my service with this code: The first time that my http.post executed this.loading.dismiss(); everything works ok, but if i try again the console returns the error:
Some help? |
|
@lucaspalencia And inside your http call, do this! doHttpPost (){ Cheers! |
|
also experiencing same issue in ionic 2 |
|
I was creating loadingController with a variable in the begin of my service and after in my method executing present() and dismiss(). Now i add the .create before the present() into my method and works well. Thank you! |
|
@malick7 Thank you! I have the same issue and now it works. Hope the ionic team can fix this trivial defect as it's really not a good programming practice to initialize a new instance before calling present() method. |
|
I think you need to kill the instance of the loading class before reusing it again. That's why it's throwing errors. Here, you can plug this provider/service if you want. I just edited this... I have been using this loading PROVIDER, just modify it to your specifications if you like... |
|
Still happening on latest version |
|
Hey guys this issue is still happening on latest version when calling this.loading.show() for me :/ any workarounds or solutions found ? |
|
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: [email protected]
…On Thu, May 4, 2017 at 2:27 PM, YannKauderer ***@***.***> 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
<#6209 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/ABw6-TbsdHIUu6vTmvDbAmFmP8NF44VJks5r2bYjgaJpZM4IJOHs>
.
|
|
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. |
and others
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:
ionic start MyIonic2Project tutorial --v2 --ts3 . Check the console for the exception
Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)
Which Ionic Version? 2.x
Plunker that shows an example of your issue
http://plnkr.co/edit/fA0KB70ggJd0nptNvYpl?p=preview
Run
ionic infofrom terminal/cmd prompt: (paste output below)The text was updated successfully, but these errors were encountered: