fix(core): add warning when using zoneless but zone.js is still loaded

Users may be using zoneless, but are still loading Zone.js in which case they won't get the full benefits like reduced bundle size. These changes detect such a case and log a warning.
crisbeto · May 15, 2024 · 9d87582 · 9d87582
1 parent f1e3ec2
commit 9d87582
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 1 deletion.
diff --git a/goldens/public-api/core/errors.md b/goldens/public-api/core/errors.md
@@ -147,6 +147,8 @@ export const enum RuntimeErrorCode {
     // (undocumented)
     UNEXPECTED_ZONE_STATE = 909,
     // (undocumented)
+    UNEXPECTED_ZONEJS_PRESENT_IN_ZONELESS_MODE = 914,
+    // (undocumented)
     UNKNOWN_BINDING = 303,
     // (undocumented)
     UNKNOWN_ELEMENT = 304,

diff --git a/packages/core/src/change_detection/scheduling/zoneless_scheduling_impl.ts b/packages/core/src/change_detection/scheduling/zoneless_scheduling_impl.ts
@@ -13,7 +13,7 @@ import {Injectable} from '../../di/injectable';
 import {inject} from '../../di/injector_compatibility';
 import {EnvironmentProviders} from '../../di/interface/provider';
 import {makeEnvironmentProviders} from '../../di/provider_collection';
-import {RuntimeError, RuntimeErrorCode} from '../../errors';
+import {RuntimeError, RuntimeErrorCode, formatRuntimeError} from '../../errors';
 import {PendingTasks} from '../../pending_tasks';
 import {
   scheduleCallbackWithMicrotask,
@@ -293,6 +293,17 @@ export class ChangeDetectionSchedulerImpl implements ChangeDetectionScheduler {
  */
 export function provideExperimentalZonelessChangeDetection(): EnvironmentProviders {
   performanceMarkFeature('NgZoneless');
+
+  if ((typeof ngDevMode === 'undefined' || ngDevMode) && typeof Zone !== 'undefined' && Zone) {
+    const message = formatRuntimeError(
+      RuntimeErrorCode.UNEXPECTED_ZONEJS_PRESENT_IN_ZONELESS_MODE,
+      `The application is using zoneless change detection, but is still loading Zone.js.` +
+        `Consider removing Zone.js to get the full benefits of zoneless. ` +
+        `In applcations using the Angular CLI, Zone.js is typically included in the "polyfills" section of the angular.json file.`,
+    );
+    console.warn(message);
+  }
+
   return makeEnvironmentProviders([
     {provide: ChangeDetectionScheduler, useExisting: ChangeDetectionSchedulerImpl},
     {provide: NgZone, useClass: NoopNgZone},

diff --git a/packages/core/src/errors.ts b/packages/core/src/errors.ts
@@ -116,6 +116,7 @@ export const enum RuntimeErrorCode {
   VIEW_ALREADY_DESTROYED = 911,
   COMPONENT_ID_COLLISION = -912,
   IMAGE_PERFORMANCE_WARNING = -913,
+  UNEXPECTED_ZONEJS_PRESENT_IN_ZONELESS_MODE = 914,
 
   // Signal integration errors
   REQUIRED_INPUT_NO_VALUE = -950,