ngZone or zone.js: the place of monkey-patching?

Question

I'm learning how ngZone works in Angular. I understood that it's doing monkey-patching of standard async operations(such as setTimeout).

But who is doing monkey-patching? zone.js library or Angular itself within ngZone? It would be great if you could show specific place in source code where it happens.

Günter Zöchbauer · Accepted Answer · 2017-11-05T15:54:51.520

2

Angular runs the zone within zone.js, and zone.js provides a scope with patched API.

You can yourself use zone.run(...) without anything from Angular and get all the effects of the patched API.

See also https://github.com/angular/zone.js/

The code that patches the timer https://github.com/angular/zone.js/blob/master/lib/common/timers.ts#L22

edited Nov 05 '17 at 15:54

answered Nov 05 '17 at 15:41

Günter Zöchbauer

623,577
216
2,003
1,567

so setTimeoutOriginal !== setTimeout? I could not find a specific place in zone.js, could you provide me a line? – Stepan Suvorov Nov 05 '17 at 15:45
@StepanSuvorov you can't get the original method after zone has loaded. That would be internal to zone as I've never seen an API to get the original. – Reactgular Nov 05 '17 at 15:53
@MathewFoscarini let assume I store the link to the original object and only after include zone.js – Stepan Suvorov Nov 05 '17 at 17:04
@GünterZöchbauer thank you for the update, for some reason I still can't grep `setTimeout` string there. It's logical that if you overwrite the property you should write it down, no? – Stepan Suvorov Nov 05 '17 at 17:06
They seem to patch the Timer object, not each method individually. – Günter Zöchbauer Nov 05 '17 at 17:07
yes, thank you very much, I found it - https://github.com/angular/zone.js/blob/master/lib/browser/browser.ts#L30 – Stepan Suvorov Nov 05 '17 at 17:08

score 1 · Answer 2 · answered Nov 05 '17 at 15:50

The zone library has to work in both the browser and server-side projects. So it's a little more complicated than just patching global functions.

Zone not only patches global APIs, but also patches event objects as they are broadcasted. The patching is done via Zone.__load_patch and you can see what is being patched in these modules.

https://github.com/angular/zone.js/blob/master/lib/browser/browser.ts

https://github.com/angular/zone.js/blob/master/lib/node/node.ts

https://github.com/angular/zone.js/blob/master/lib/rxjs/rxjs.ts

It's clearly not a simply process. I'm sure there are still some edge cases that zone hasn't patched.

Manish Bansal · Answer 3 · 2018-05-15T03:00:04.257

Monkey patching is done by Zone.js. In ng_zone.ts, zone.ts is loaded which creates the root zone as well as monkey patches the API.

NGZone simply forks a child zone named 'angular' and provides callbacks in zone specifications. In those callbacks, it emits events which are further subscribed in application_ref.ts and change detection is kicked off.

Monkey Patching: This is done by calling Zone.__load_patch() function with 2 arguments. First argument is the identifier of the monkey-patched APIs and second is the patch function which when executed, replaces the actual browser API with the re-defined version.

Now, this is just the tip of the iceberg. Actual magic is done by calling patchMethod() of utils.ts. For set/clearTimeOut case, this is done here.

In patchMethod(), original api is saved in local variable i.e. delegate and the same is returned which is saved in setNative variable inside timers.ts.

For complete workflow, you can refer below article.

https://medium.com/reverse-engineering-angular/angular-deep-dive-zone-js-how-does-it-monkey-patches-various-apis-9cc1c7fcc321

ngZone or zone.js: the place of monkey-patching?

3 Answers3