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 13, 2024 · 9c5be5a · 9c5be5a
1 parent 85ac2de
commit 9c5be5a
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/goldens/public-api/core/errors.md b/goldens/public-api/core/errors.md
@@ -161,7 +161,9 @@ export const enum RuntimeErrorCode {
     // (undocumented)
     VIEW_ALREADY_ATTACHED = 902,
     // (undocumented)
-    VIEW_ALREADY_DESTROYED = 911
+    VIEW_ALREADY_DESTROYED = 911,
+    // (undocumented)
+    ZONELESS_REMOVE_ZONE = 914
 }
 
 // (No @packageDocumentation comment for this package)

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,16 @@ export class ChangeDetectionSchedulerImpl implements ChangeDetectionScheduler {
  */
 export function provideExperimentalZonelessChangeDetection(): EnvironmentProviders {
   performanceMarkFeature('NgZoneless');
+
+  if ((typeof ngDevMode === 'undefined' || ngDevMode) && typeof Zone !== 'undefined' && Zone) {
+    const message = formatRuntimeError(
+      RuntimeErrorCode.ZONELESS_REMOVE_ZONE,
+      `The application is using zoneless change detection, but is still loading Zone.js.` +
+        `Consider removing Zone.js to get the full benefits of zoneless.`,
+    );
+    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,
+  ZONELESS_REMOVE_ZONE = 914,
 
   // Signal integration errors
   REQUIRED_INPUT_NO_VALUE = -950,