Change detection not being triggered in third party Ajax callbacks

[jhades]

Steps to reproduce and a minimal demo of the problem

There is definitively something going on with Ajax callbacks of third party libraries in beta-12 zone.js 0.6.6. For example, take this click handler for a Auth0 login button:

const lock = new Auth0Lock('your_id', 'test.eu.auth0.com');

lock.show({icon: 'https://your_icon'}, (err:string, profile:any, id_token:string) => {

    debugger;

    this.ngZone.run(() => {
        // handle login

    });
});

We provide Auth0 an ajax callback, that gets triggered by them and not by Angular HTTP.

Wen the debugger statement gets hit, we are inside the zone. See the stack trace at that point:

Current behavior
With Beta 12, we need to wrap any code inside the Ajax callback inside a ngZone.run for change detection to be triggered. Note that setTimeout will not work either, which is even more puzzling.

If we don't use ngZone.run, any changes done by the code inside the callback will not be reflected in the view.

Expected/desired behavior

Usually, we shouldn't need do do anything special so that code inside the callback triggers change detection. Ajax callbacks triggered either by Angular or by third party libraries should transparently trigger change detection.

[robwormald]

as of Zone 0.6, you'll always be in the Zone, so to speak, the relevant question is which zone - which you can check with Zone.current.name - it should be angular, if it shows <root> then there's a problem.

I had a look at the source for reqwest, which is what Auth0 uses in their SDK, which is using XHR under the hood, and it appears to work fine in isolation.

[matthewdenobrega]

After upgrading from beta 6 to beta 15 I'm seeing something similar, but only after route changes and not on initial load:

• on initial load http calls (I'm using Lokka for graphQL queries) run in the zone, but the change-detection still runs - that could be because things other than the http call are triggering a round of change detection after the call has resolved
• after a route change, the http calls are also running in the zone, and the UI doesn't update when the call resolves

I've worked around this temporarily by running all API returns in ngZone.run() but I'm pretty sure this is a regression between beta 6 and 15.

[jhades]

@robwormald I just upgraded to Beta 15 and am currently using zone 0.6.11:

npm ls zone.js
-- angular2-universal@0.95.1
-- angular2-universal-polyfills@0.4.1
-- zone.js@0.6.11

I can still reproduce the issue in the same scenario (the auth0 call). This is the stack trace and the value of Zone.current.name in a breakpoint hit at the beginning of the Auth0 callback.

As we can see in the console at the bottom of the screenshot, Zone.current.name is set to <root>.

As a workaround i'm also running the callback inside ngZone.run(), but so far I have not noticed a different behaviour depending on the routing scenario.

[jhades]

Hello, I noticed that if we add an event listener to a button using the console, that will also run outside the angular zone (on beta-17). I can see the zone name is root and not angular.

document.querySelector('#btn')
       .addEventListener('click', function() {
            console.log('Hello World !');
            debugger;
        });

But the event handler is for example in a constructor, there the zone is angular and it works.

Im not sure what is the expected behaviour of the example above, which is just an example on how a third party library might be integrated;

For example, registering a click handler via the console, should or should it not trigger change detection, and if not what would be the reason behind it?

Apparently the functionality is: if a third party library is called from inside angular code, then its automatically integrated as all its browser callbacks will run inside the angular zone.

If a third-party library running on the same page register callbacks completely outside Angular (not in an Angular class), then it does not call change detection.

Is this the intention? Thank you for any insight on this matter, KR

[zoechi]

@jhades That's the intention. Code that runs inside Angulars zone uses the patched API where event handlers regisered with addEventListener() call the patched method whereas in the console or code that runs outside Angulars zone for other reasons doesn't used the pached API and therefore Angular doesn't get notified about these events and doesn't invoke change detection.

[jhades]

Thanks @zoechi, makes sense. Ill try to reproduce this with RC0+ (once I can migrate my application)
Apparently the HTTP implementation is being refactored, maybe the issue will be fixed indirectly via that.

[pkozlowski-opensource]

Closing as we haven't heard back from @jhades

[tusharsingh]

I've encountered this again using Facebook login:
FB.login opens up in a popup and then calls a callback function. The zone name prior to the call is angular.

In the callback function the name is .

@tusharsingh The problem is that Zone.js can't monkey patch JSONP. See clear explanation of this problem in the article Do you still think that NgZone (zone.js) is required for change detection in Angular?. From the article:

To learn that I just dig into gapi minified sources and found that it uses JSONP
to make a network request. This approach doesn’t use common AJAX APIs
like XMLHttpRequest or Fetch API which are patched and tracked by Zones.
Instead, it creates a script tag with a source URL and defines a global callback
to be triggered when the requested script with data is fetched from the server.
This can’t be patched or detected by Zones and hence the frameworks
remains oblivious to requests performed using this technique.

Usually all 3rd party libraries from places such as Google, Facebook, Twitter, etc. use JSONP technique.

@robwormald Correct me if I am wrong...

[mlc-mlapis]

@vieno-jyoti ... so in such a case it is necessary to make a request through your server which asks the other server, right?

[JiaLiPassion]

@vieno-jyoti , could you provide some reproduce repo? I can try to make a patch in zone.js.

@JiaLiPassion Sure. Please give me 24 hours 😄 Be right back!