New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Angular ChangeDetection doesn't work #52
Comments
Same problem here, using ionic 4 |
@kzimny Let me tru to reproduce this issue. Will get back to you. |
@manish2788 yes, please fix the issue asap. With the |
I think the problem is about the plugin change the reference of XMLHttpRequest and because of this the code added/modify with ngZone is put it out. |
@nicearma ngZone is a temporary workaround.
No, |
I din't make reference to your code, you can see at https://github.com/angular/angular/search?q=XMLHttpRequest&unscoped_q=XMLHttpRequest that ngZone use the native XMLHttpRequest, so i think the solution at this problem is study the ngZone repository and see the interaction with XMLHttpRequest and compare with the custom XMLHttpRequest. ngZone add the magic around all kind of JS code (xhr, rxjs, etc - you can see in the repository), normally in angular you dont need to do this. this.adminService.getCasesForCaseLibrary().subscribe(
response => {
this.casesFromDB = response;
**this.cdRef.markForCheck();** // <== Normally Angular doesn't need this, only if you use functions that ngZone doesn't add the magic, like one special async function, normally all rxjs functions have the ngZone detectors
}); I think one simple test could be to add the js this plugin before the ngZone JS and see if work like it should You can see more about the interaction with ngZone here See https://github.com/angular/angular/blob/698b0288bee60b8c5926148b79b5b93f454098db/packages/zone.js/lib/browser/browser.ts#L95 |
Thank you for the hints. If you use |
I'm having the same issue with Angular 9. Forcing refresh by interacting with the app will trigger an update. It would be very nice to have a fix, this plugin will saves us a lot of trouble. |
@manish2788 any chance to get the plugin work with angular ChangeDetection? |
Hi @kzimny, Will it be possible for you to share a sample angular app which demonstrates the erratic behaviour pointed by you. |
Hi @manish2788 , @kzimny here's a demo app that expose the problem, i've added the necessary to the readme to be able to setup and start both web and cordova version so you can compare. The Angular build has sourcemap enabled, app.component.ts is the one that trigger the call and should refresh it's view at the same time. |
Thank you. Your example should work on android in windows environment but it doesn't in my case. When I start |
@kzimny the refresh problem happen only on IOS, this plugin doesn't replace xmlhttprequest on Android so no refresh problem. Not the point of this issue i think, but after adding the android platform (not included in the setup.sh) it works fine. For the web version it might have something to do with the base path, i'll check. |
@ygodin agree that the problem does not exist on android platform. But that's the point. Your example doesn't work on android on my side. The message LOADING does not disapper on android running on windows environment. Hope it works for oracle guys. |
@kzimny Do you see any error in the debugger ? I'm using Cordova 8.x.x |
Cordova 9.0.1, I found that it works fine on real device bot not on android emulator. Maybe something is wrong with my emulator settings. Anyway, android was newer a problem. The problem exist on iOS. Hope @manish2788 can find the solution soon. |
@kzimny i just pushed a fix for the windows web version, the baseDir had to be changed so it works on both platform. |
In the meatime, here's how we fixed it, we load this service at the root level of our app, this catch everything, not only HTTPClient. From what i see it looks like a race condition between the plugin polyfill and zone, both trying to patch xmlhttprequest. @Injectable()
export class XmlHttpRequestWkwebviewPatcher {
constructor(
private readonly appRef: ApplicationRef,
@Inject(WINDOW) private readonly window: Window,
@Inject(DOCUMENT) private readonly document: Document
) {
if (window.cordova && document.URL.includes('ionic://')) {
const origOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function() {
this.addEventListener(
'load',
() => {
setTimeout(() => {
appRef.tick();
});
},
{once: true}
);
origOpen.apply(this, arguments);
};
}
}
} |
Thanks for sharing the app and relevant informations. Will get back upon this. |
@ygodin can you specify any details on how to use/load this service? |
@manish2788 is there any progress on this? |
@sanket-bhalerao Hi Sanket, We are working on the reported issues. Next week we be sharing the updates. |
@manish2788 any updates on this? |
@sanket-bhalerao We have been verifying the sample app provided by @ygodin. |
so there is a simple fix for this. ✔️ so I have done it inside my HTTP Interceptor for all requests. // your imports
@Injectable()
export class RequestInterceptor implements HttpInterceptor {
runInThisZone(zone) {
return function patchedobsverable(source) {
return Observable.create(observer => {
const onNext = (value) => zone.run(() => observer.next(value));
const onError = (e) => zone.run(() => observer.error(e));
const onComplete = () => zone.run(() => observer.complete());
return source.subscribe(onNext, onError, onComplete);
});
};
}
constructor(private zone: NgZone) {}
intercept(req: HttpRequest < any > , next: HttpHandler): Observable < HttpEvent < any >> {
if (window.usingCordova) { // your cordova/platform check here
req = req.clone();
return this.zone.run(() => next.handle(req).pipe(this.runInThisZone(this.zone)));
} else {
return next.handle(req);
}
}
} so there we are. all request are forced into the right zone and the angular change detection triggers correctly. 😄 |
Plugin doesn't support out of the box fix for Angular. Closing the issue. |
Hi,
does anybody know why the angular ChangeDetection is not working with
cordova-plugin-wkwebview-file-xhr
? I load data in my angular 9+ project and get the correct response from api but the view can not be refreshed.As soon as
this.cdRef.markForCheck();
is run in NgZone the view is going refreshed:Does
cordova-plugin-wkwebview-file-xhr
provides its own promise polyfill causing the angular change detection to break? Do I miss something? How to get the angular change detection work without run markForCheck() in NgZone? My angular code is shared between web, desktop and mobile platforms and the change detection should not be run outside of angular zone. Any idea?The text was updated successfully, but these errors were encountered: