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

crisbeto · dylhunn · commit 0cbd73c6e993 · 2024-05-20T23:37:12.000-07:00
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. PR Close #55769
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,
@@ -294,6 +294,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,
