0

I'm seeing a problem similar to Angular 2 Change Detection and Zone are Different in Cordova App, but I haven't been able to isolate the root cause.

Background: My company's mobile app has been in both iOS and Google Play stores since July. It's built using Angular 2, Webpack, and PhoneGap. The working version was built using Angular 2.0.0-beta.17, and we now have a chance to go back and upgrade Angular to the latest released version. We went through the process of rewriting two other internal apps (web only, not ported to mobile) and it went pretty smoothly. They're updated and working. We tackled the mobile app last, using our experience from rewriting the other two apps, and it seemed to be going just as well. The app runs perfectly fine locally in a browser; it also runs perfectly fine using PhoneGap locally, either through the CLI or their desktop app. The problems arise when the app is built at PhoneGap Build (there are no build errors).

What I'm seeing is the simplest change detections not working properly, and it appears that tasks that should be "in the zone" are running outside of the zone and thus, not triggering change detection. Here's the most basic example:

When on the home page of the app, you can choose "register" or "sign in"; either one simply navigates to the respective page. On either page, we're using lifecycle hooks like this:

ngAfterViewInit() {
  this.isBusy = false;
}

this.isBusy is just a boolean on the component, which we use like this in the template:

<div class="busyMask" [ngClass]="{busyOff: !isBusy}"></div>

I've checked and the lifecycle hooks are working properly and this.isBusy gets set... but the view never gets updated.

I've tried a ton of different ways to get this to work, including removing all Cordova plugins, thinking it must be one of them that's hijacking/changing the Angular's Zone, but even without plugins, the result is the same: no change detection.

I'm pretty sure I can't provide a Plunker that shows the problem since it works everywhere but on an app built with PhoneGap Build (Cordova), so I'm not sure what else I can do but answer questions from someone smarter than me who might be able to help figure this out.

Details for those who care:

Angular: 2.4.7 PhoneGap CLI: 6.5.0

Anyone?

Community
  • 1
  • 1
rheomatic
  • 1
  • 1
  • Have you checked zone in `ngAfterViewInit`? I doubt that angulars own callbacks are executing in wrong zone, looks like different bug. – kemsky Feb 10 '17 at 22:43
  • I added this to `ngAfterViewInit`: `console.log((window).Zone.current);` since I didn't have a proper typing for the non-ngZone Zone. In the browser console I see this: `_name:"angular" _parent:Zone _name:"long-stack-trace"` In the PhoneGap debug console, this: `_name:"root" _parent:null` – rheomatic Feb 11 '17 at 19:37
  • @kemsky: See my response above (I forgot to tag you). – rheomatic Feb 11 '17 at 19:44
  • Try to include `core-js` polyfills before loading zone, i would recommend create repo with minimal reproduction and report issue to either angular or zone.js repository. – kemsky Feb 11 '17 at 20:53
  • `core-js` is before `zone`... so this one remains unsolved for now. Thanks, though! – rheomatic Feb 13 '17 at 19:54

1 Answers1

0

I was having the same issue and this solution worked for me:

http://weblogs.thinktecture.com/thomas/2017/02/cordova-vs-zonejs-or-why-is-angulars-document-event-listener-not-in-a-zone.html

Abel Pastur
  • 1,905
  • 2
  • 24
  • 31
  • "Always quote the most relevant part of an important link, in case the target site is unreachable or goes permanently offline." That being said, where did you put that code? – adamdport Dec 04 '17 at 21:30