/** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.dev/license */ import {SCHEDULE_IN_ROOT_ZONE_DEFAULT} from '../change_detection/scheduling/flags'; import {RuntimeError, RuntimeErrorCode} from '../errors'; import {EventEmitter} from '../event_emitter'; import {scheduleCallbackWithRafRace} from '../util/callback_scheduler'; import {noop} from '../util/noop'; import {AsyncStackTaggingZoneSpec} from './async-stack-tagging'; // The below is needed as otherwise a number of targets fail in G3 due to: // ERROR - [JSC_UNDEFINED_VARIABLE] variable Zone is undeclared declare const Zone: any; const isAngularZoneProperty = 'isAngularZone'; export const angularZoneInstanceIdProperty = isAngularZoneProperty + '_ID'; let ngZoneInstanceId = 0; /** * An injectable service for executing work inside or outside of the Angular zone. * * The most common use of this service is to optimize performance when starting a work consisting of * one or more asynchronous tasks that don't require UI updates or error handling to be handled by * Angular. Such tasks can be kicked off via {@link #runOutsideAngular} and if needed, these tasks * can reenter the Angular zone via {@link #run}. * * * * @usageNotes * ### Example * * ```ts * import {Component, NgZone} from '@angular/core'; * import {NgIf} from '@angular/common'; * * @Component({ * selector: 'ng-zone-demo', * template: ` *

Demo: NgZone

* *

Progress: {{progress}}%

*

Done processing {{label}} of Angular zone!

* * * * `, * }) * export class NgZoneDemo { * progress: number = 0; * label: string; * * constructor(private _ngZone: NgZone) {} * * // Loop inside the Angular zone * // so the UI DOES refresh after each setTimeout cycle * processWithinAngularZone() { * this.label = 'inside'; * this.progress = 0; * this._increaseProgress(() => console.log('Inside Done!')); * } * * // Loop outside of the Angular zone * // so the UI DOES NOT refresh after each setTimeout cycle * processOutsideOfAngularZone() { * this.label = 'outside'; * this.progress = 0; * this._ngZone.runOutsideAngular(() => { * this._increaseProgress(() => { * // reenter the Angular zone and display done * this._ngZone.run(() => { console.log('Outside Done!'); }); * }); * }); * } * * _increaseProgress(doneCallback: () => void) { * this.progress += 1; * console.log(`Current progress: ${this.progress}%`); * * if (this.progress < 100) { * window.setTimeout(() => this._increaseProgress(doneCallback), 10); * } else { * doneCallback(); * } * } * } * ``` * * @publicApi */ export class NgZone { readonly hasPendingMacrotasks: boolean = false; readonly hasPendingMicrotasks: boolean = false; /** * Whether there are no outstanding microtasks or macrotasks. */ readonly isStable: boolean = true; /** * Notifies when code enters Angular Zone. This gets fired first on VM Turn. */ readonly onUnstable: EventEmitter = new EventEmitter(false); /** * Notifies when there is no more microtasks enqueued in the current VM Turn. * This is a hint for Angular to do change detection, which may enqueue more microtasks. * For this reason this event can fire multiple times per VM Turn. */ readonly onMicrotaskEmpty: EventEmitter = new EventEmitter(false); /** * Notifies when the last `onMicrotaskEmpty` has run and there are no more microtasks, which * implies we are about to relinquish VM turn. * This event gets called just once. */ readonly onStable: EventEmitter = new EventEmitter(false); /** * Notifies that an error has been delivered. */ readonly onError: EventEmitter = new EventEmitter(false); constructor(options: { enableLongStackTrace?: boolean; shouldCoalesceEventChangeDetection?: boolean; shouldCoalesceRunChangeDetection?: boolean; }) { const { enableLongStackTrace = false, shouldCoalesceEventChangeDetection = false, shouldCoalesceRunChangeDetection = false, scheduleInRootZone = SCHEDULE_IN_ROOT_ZONE_DEFAULT, } = options as InternalNgZoneOptions; if (typeof Zone == 'undefined') { throw new RuntimeError( RuntimeErrorCode.MISSING_ZONEJS, ngDevMode && `In this configuration Angular requires Zone.js`, ); } Zone.assertZonePatched(); const self = this as any as NgZonePrivate; self._nesting = 0; self._outer = self._inner = Zone.current; // AsyncStackTaggingZoneSpec provides `linked stack traces` to show // where the async operation is scheduled. For more details, refer // to this article, https://developer.chrome.com/blog/devtools-better-angular-debugging/ // And we only import this AsyncStackTaggingZoneSpec in development mode, // in the production mode, the AsyncStackTaggingZoneSpec will be tree shaken away. if (ngDevMode) { self._inner = self._inner.fork(new AsyncStackTaggingZoneSpec('Angular')); } if ((Zone as any)['TaskTrackingZoneSpec']) { self._inner = self._inner.fork(new ((Zone as any)['TaskTrackingZoneSpec'] as any)()); } if (enableLongStackTrace && (Zone as any)['longStackTraceZoneSpec']) { self._inner = self._inner.fork((Zone as any)['longStackTraceZoneSpec']); } // if shouldCoalesceRunChangeDetection is true, all tasks including event tasks will be // coalesced, so shouldCoalesceEventChangeDetection option is not necessary and can be skipped. self.shouldCoalesceEventChangeDetection = !shouldCoalesceRunChangeDetection && shouldCoalesceEventChangeDetection; self.shouldCoalesceRunChangeDetection = shouldCoalesceRunChangeDetection; self.callbackScheduled = false; self.scheduleInRootZone = scheduleInRootZone; forkInnerZoneWithAngularBehavior(self); } /** This method checks whether the method call happens within an Angular Zone instance. */ static isInAngularZone(): boolean { // Zone needs to be checked, because this method might be called even when NoopNgZone is used. return typeof Zone !== 'undefined' && Zone.current.get(isAngularZoneProperty) === true; } /** Assures that the method is called within the Angular Zone, otherwise throws an error. */ static assertInAngularZone(): void { if (!NgZone.isInAngularZone()) { throw new RuntimeError( RuntimeErrorCode.UNEXPECTED_ZONE_STATE, ngDevMode && 'Expected to be in Angular Zone, but it is not!', ); } } /** Assures that the method is called outside of the Angular Zone, otherwise throws an error. */ static assertNotInAngularZone(): void { if (NgZone.isInAngularZone()) { throw new RuntimeError( RuntimeErrorCode.UNEXPECTED_ZONE_STATE, ngDevMode && 'Expected to not be in Angular Zone, but it is!', ); } } /** * Executes the `fn` function synchronously within the Angular zone and returns value returned by * the function. * * Running functions via `run` allows you to reenter Angular zone from a task that was executed * outside of the Angular zone (typically started via {@link #runOutsideAngular}). * * Any future tasks or microtasks scheduled from within this function will continue executing from * within the Angular zone. * * If a synchronous error happens it will be rethrown and not reported via `onError`. */ run(fn: (...args: any[]) => T, applyThis?: any, applyArgs?: any[]): T { return (this as any as NgZonePrivate)._inner.run(fn, applyThis, applyArgs); } /** * Executes the `fn` function synchronously within the Angular zone as a task and returns value * returned by the function. * * Running functions via `runTask` allows you to reenter Angular zone from a task that was executed * outside of the Angular zone (typically started via {@link #runOutsideAngular}). * * Any future tasks or microtasks scheduled from within this function will continue executing from * within the Angular zone. * * If a synchronous error happens it will be rethrown and not reported via `onError`. */ runTask(fn: (...args: any[]) => T, applyThis?: any, applyArgs?: any[], name?: string): T { const zone = (this as any as NgZonePrivate)._inner; const task = zone.scheduleEventTask('NgZoneEvent: ' + name, fn, EMPTY_PAYLOAD, noop, noop); try { return zone.runTask(task, applyThis, applyArgs); } finally { zone.cancelTask(task); } } /** * Same as `run`, except that synchronous errors are caught and forwarded via `onError` and not * rethrown. */ runGuarded(fn: (...args: any[]) => T, applyThis?: any, applyArgs?: any[]): T { return (this as any as NgZonePrivate)._inner.runGuarded(fn, applyThis, applyArgs); } /** * Executes the `fn` function synchronously in Angular's parent zone and returns value returned by * the function. * * Running functions via {@link #runOutsideAngular} allows you to escape Angular's zone and do * work that * doesn't trigger Angular change-detection or is subject to Angular's error handling. * * Any future tasks or microtasks scheduled from within this function will continue executing from * outside of the Angular zone. * * Use {@link #run} to reenter the Angular zone and do work that updates the application model. */ runOutsideAngular(fn: (...args: any[]) => T): T { return (this as any as NgZonePrivate)._outer.run(fn); } } const EMPTY_PAYLOAD = {}; export interface NgZonePrivate extends NgZone { _outer: Zone; _inner: Zone; _nesting: number; _hasPendingMicrotasks: boolean; hasPendingMacrotasks: boolean; hasPendingMicrotasks: boolean; callbackScheduled: boolean; /** * A flag to indicate if NgZone is currently inside * checkStable and to prevent re-entry. The flag is * needed because it is possible to invoke the change * detection from within change detection leading to * incorrect behavior. * * For detail, please refer here, * https://github.com/angular/angular/pull/40540 */ isCheckStableRunning: boolean; isStable: boolean; /** * Optionally specify coalescing event change detections or not. * Consider the following case. * *
* *
* * When button is clicked, because of the event bubbling, both * event handlers will be called and 2 change detections will be * triggered. We can coalesce such kind of events to trigger * change detection only once. * * By default, this option will be false. So the events will not be * coalesced and the change detection will be triggered multiple times. * And if this option be set to true, the change detection will be * triggered async by scheduling it in an animation frame. So in the case above, * the change detection will only be trigged once. */ shouldCoalesceEventChangeDetection: boolean; /** * Optionally specify if `NgZone#run()` method invocations should be coalesced * into a single change detection. * * Consider the following case. * * for (let i = 0; i < 10; i ++) { * ngZone.run(() => { * // do something * }); * } * * This case triggers the change detection multiple times. * With ngZoneRunCoalescing options, all change detections in an event loops trigger only once. * In addition, the change detection executes in requestAnimation. * */ shouldCoalesceRunChangeDetection: boolean; /** * Whether to schedule the coalesced change detection in the root zone */ scheduleInRootZone: boolean; } function checkStable(zone: NgZonePrivate) { // TODO: @JiaLiPassion, should check zone.isCheckStableRunning to prevent // re-entry. The case is: // // @Component({...}) // export class AppComponent { // constructor(private ngZone: NgZone) { // this.ngZone.onStable.subscribe(() => { // this.ngZone.run(() => console.log('stable');); // }); // } // // The onStable subscriber run another function inside ngZone // which causes `checkStable()` re-entry. // But this fix causes some issues in g3, so this fix will be // launched in another PR. if (zone._nesting == 0 && !zone.hasPendingMicrotasks && !zone.isStable) { try { zone._nesting++; zone.onMicrotaskEmpty.emit(null); } finally { zone._nesting--; if (!zone.hasPendingMicrotasks) { try { zone.runOutsideAngular(() => zone.onStable.emit(null)); } finally { zone.isStable = true; } } } } } function delayChangeDetectionForEvents(zone: NgZonePrivate) { /** * We also need to check _nesting here * Consider the following case with shouldCoalesceRunChangeDetection = true * * ngZone.run(() => {}); * ngZone.run(() => {}); * * We want the two `ngZone.run()` only trigger one change detection * when shouldCoalesceRunChangeDetection is true. * And because in this case, change detection run in async way(requestAnimationFrame), * so we also need to check the _nesting here to prevent multiple * change detections. */ if (zone.isCheckStableRunning || zone.callbackScheduled) { return; } zone.callbackScheduled = true; function scheduleCheckStable() { scheduleCallbackWithRafRace(() => { zone.callbackScheduled = false; updateMicroTaskStatus(zone); zone.isCheckStableRunning = true; checkStable(zone); zone.isCheckStableRunning = false; }); } if (zone.scheduleInRootZone) { Zone.root.run(() => { scheduleCheckStable(); }); } else { zone._outer.run(() => { scheduleCheckStable(); }); } updateMicroTaskStatus(zone); } function forkInnerZoneWithAngularBehavior(zone: NgZonePrivate) { const delayChangeDetectionForEventsDelegate = () => { delayChangeDetectionForEvents(zone); }; const instanceId = ngZoneInstanceId++; zone._inner = zone._inner.fork({ name: 'angular', properties: { [isAngularZoneProperty]: true, [angularZoneInstanceIdProperty]: instanceId, [angularZoneInstanceIdProperty + instanceId]: true, }, onInvokeTask: ( delegate: ZoneDelegate, current: Zone, target: Zone, task: Task, applyThis: any, applyArgs: any, ): any => { // Prevent triggering change detection when the flag is detected. if (shouldBeIgnoredByZone(applyArgs)) { return delegate.invokeTask(target, task, applyThis, applyArgs); } try { onEnter(zone); return delegate.invokeTask(target, task, applyThis, applyArgs); } finally { if ( (zone.shouldCoalesceEventChangeDetection && task.type === 'eventTask') || zone.shouldCoalesceRunChangeDetection ) { delayChangeDetectionForEventsDelegate(); } onLeave(zone); } }, onInvoke: ( delegate: ZoneDelegate, current: Zone, target: Zone, callback: Function, applyThis: any, applyArgs?: any[], source?: string, ): any => { try { onEnter(zone); return delegate.invoke(target, callback, applyThis, applyArgs, source); } finally { if ( zone.shouldCoalesceRunChangeDetection && // Do not delay change detection when the task is the scheduler's tick. // We need to synchronously trigger the stability logic so that the // zone-based scheduler can prevent a duplicate ApplicationRef.tick // by first checking if the scheduler tick is running. This does seem a bit roundabout, // but we _do_ still want to trigger all the correct events when we exit the zone.run // (`onMicrotaskEmpty` and `onStable` _should_ emit; developers can have code which // relies on these events happening after change detection runs). // Note: `zone.callbackScheduled` is already in delayChangeDetectionForEventsDelegate // but is added here as well to prevent reads of applyArgs when not necessary !zone.callbackScheduled && !isSchedulerTick(applyArgs) ) { delayChangeDetectionForEventsDelegate(); } onLeave(zone); } }, onHasTask: ( delegate: ZoneDelegate, current: Zone, target: Zone, hasTaskState: HasTaskState, ) => { delegate.hasTask(target, hasTaskState); if (current === target) { // We are only interested in hasTask events which originate from our zone // (A child hasTask event is not interesting to us) if (hasTaskState.change == 'microTask') { zone._hasPendingMicrotasks = hasTaskState.microTask; updateMicroTaskStatus(zone); checkStable(zone); } else if (hasTaskState.change == 'macroTask') { zone.hasPendingMacrotasks = hasTaskState.macroTask; } } }, onHandleError: (delegate: ZoneDelegate, current: Zone, target: Zone, error: any): boolean => { delegate.handleError(target, error); zone.runOutsideAngular(() => zone.onError.emit(error)); return false; }, }); } function updateMicroTaskStatus(zone: NgZonePrivate) { if ( zone._hasPendingMicrotasks || ((zone.shouldCoalesceEventChangeDetection || zone.shouldCoalesceRunChangeDetection) && zone.callbackScheduled === true) ) { zone.hasPendingMicrotasks = true; } else { zone.hasPendingMicrotasks = false; } } function onEnter(zone: NgZonePrivate) { zone._nesting++; if (zone.isStable) { zone.isStable = false; zone.onUnstable.emit(null); } } function onLeave(zone: NgZonePrivate) { zone._nesting--; checkStable(zone); } /** * Provides a noop implementation of `NgZone` which does nothing. This zone requires explicit calls * to framework to perform rendering. */ export class NoopNgZone implements NgZone { readonly hasPendingMicrotasks = false; readonly hasPendingMacrotasks = false; readonly isStable = true; readonly onUnstable = new EventEmitter(); readonly onMicrotaskEmpty = new EventEmitter(); readonly onStable = new EventEmitter(); readonly onError = new EventEmitter(); run(fn: (...args: any[]) => T, applyThis?: any, applyArgs?: any): T { return fn.apply(applyThis, applyArgs); } runGuarded(fn: (...args: any[]) => any, applyThis?: any, applyArgs?: any): T { return fn.apply(applyThis, applyArgs); } runOutsideAngular(fn: (...args: any[]) => T): T { return fn(); } runTask(fn: (...args: any[]) => T, applyThis?: any, applyArgs?: any, name?: string): T { return fn.apply(applyThis, applyArgs); } } function shouldBeIgnoredByZone(applyArgs: unknown): boolean { return hasApplyArgsData(applyArgs, '__ignore_ng_zone__'); } function isSchedulerTick(applyArgs: unknown): boolean { return hasApplyArgsData(applyArgs, '__scheduler_tick__'); } function hasApplyArgsData(applyArgs: unknown, key: string) { if (!Array.isArray(applyArgs)) { return false; } // We should only ever get 1 arg passed through to invokeTask. // Short circuit here incase that behavior changes. if (applyArgs.length !== 1) { return false; } return applyArgs[0]?.data?.[key] === true; } // Set of options recognized by the NgZone. export interface InternalNgZoneOptions { enableLongStackTrace?: boolean; shouldCoalesceEventChangeDetection?: boolean; shouldCoalesceRunChangeDetection?: boolean; scheduleInRootZone?: boolean; } export function getNgZone( ngZoneToUse: NgZone | 'zone.js' | 'noop' = 'zone.js', options: InternalNgZoneOptions, ): NgZone { if (ngZoneToUse === 'noop') { return new NoopNgZone(); } if (ngZoneToUse === 'zone.js') { return new NgZone(options); } return ngZoneToUse; }