fix(core): warnings for oversized images and lazy-lcp present with bootstrapModule (angular#57060)

This commit adds the `ImagePerformanceWarning` to the common bootstrap
code rather than only starting it when using `bootstrapApplication`.

PR Close angular#57060

Author: atscott

packages/core/src/image_performance_warning.ts

@@ -12,7 +12,6 @@ import {inject} from './di/injector_compatibility';
 import {formatRuntimeError, RuntimeErrorCode} from './errors';
 import {OnDestroy} from './interface/lifecycle_hooks';
 import {getDocument} from './render3/interfaces/document';
-import {NgZone} from './zone';
 
 // A delay in milliseconds before the scan is run after onLoad, to avoid any
 // potential race conditions with other LCP-related functions. This delay
@@ -28,7 +27,6 @@ export class ImagePerformanceWarning implements OnDestroy {
   private window: Window | null = null;
   private observer: PerformanceObserver | null = null;
   private options: ImageConfig = inject(IMAGE_CONFIG);
-  private ngZone = inject(NgZone);
   private lcpImageUrl?: string;
 
   public start() {
@@ -48,9 +46,7 @@ export class ImagePerformanceWarning implements OnDestroy {
       const waitToScan = () => {
         setTimeout(this.scanImages.bind(this), SCAN_DELAY);
       };
-      // Angular doesn't have to run change detection whenever any asynchronous tasks are invoked in
-      // the scope of this functionality.
-      this.ngZone.runOutsideAngular(() => {
+      const setup = () => {
         // Consider the case when the application is created and destroyed multiple times.
         // Typically, applications are created instantly once the page is loaded, and the
         // `window.load` listener is always triggered. However, the `window.load` event will never
@@ -61,7 +57,14 @@ export class ImagePerformanceWarning implements OnDestroy {
         } else {
           this.window?.addEventListener('load', waitToScan, {once: true});
         }
-      });
+      };
+      // Angular doesn't have to run change detection whenever any asynchronous tasks are invoked in
+      // the scope of this functionality.
+      if (typeof Zone !== 'undefined') {
+        Zone.root.run(() => setup());
+      } else {
+        setup();
+      }
     }
   }
 

packages/core/src/platform/bootstrap.ts

@@ -117,16 +117,16 @@ export function bootstrap<M>(
         // If the `LOCALE_ID` provider is defined at bootstrap then we set the value for ivy
         const localeId = envInjector.get(LOCALE_ID, DEFAULT_LOCALE_ID);
         setLocaleId(localeId || DEFAULT_LOCALE_ID);
+        if (typeof ngDevMode === 'undefined' || ngDevMode) {
+          const imagePerformanceService = envInjector.get(ImagePerformanceWarning);
+          imagePerformanceService.start();
+        }
 
         if (isApplicationBootstrapConfig(config)) {
           const appRef = envInjector.get(ApplicationRef);
           if (config.rootComponent !== undefined) {
             appRef.bootstrap(config.rootComponent);
           }
-          if (typeof ngDevMode === 'undefined' || ngDevMode) {
-            const imagePerformanceService = envInjector.get(ImagePerformanceWarning);
-            imagePerformanceService.start();
-          }
           return appRef;
         } else {
           moduleDoBootstrap(config.moduleRef, config.allPlatformModules);

packages/core/test/bundling/animations-standalone/bundle.golden_symbols.json

@@ -701,6 +701,9 @@
   {
     "name": "bloomHasToken"
   },
+  {
+    "name": "bootstrap"
+  },
   {
     "name": "buildAnimationAst"
   },
@@ -1118,6 +1121,9 @@
   {
     "name": "invokeQuery"
   },
+  {
+    "name": "isApplicationBootstrapConfig"
+  },
   {
     "name": "isComponentDef"
   },

packages/core/test/bundling/animations/bundle.golden_symbols.json

@@ -755,6 +755,9 @@
   {
     "name": "bloomHasToken"
   },
+  {
+    "name": "bootstrap"
+  },
   {
     "name": "buildAnimationAst"
   },
@@ -1184,6 +1187,9 @@
   {
     "name": "invokeQuery"
   },
+  {
+    "name": "isApplicationBootstrapConfig"
+  },
   {
     "name": "isComponentDef"
   },

packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json

@@ -572,6 +572,9 @@
   {
     "name": "bloomHasToken"
   },
+  {
+    "name": "bootstrap"
+  },
   {
     "name": "callHook"
   },
@@ -938,6 +941,9 @@
   {
     "name": "invokeHostBindingsInCreationMode"
   },
+  {
+    "name": "isApplicationBootstrapConfig"
+  },
   {
     "name": "isComponentDef"
   },

packages/core/test/bundling/defer/bundle.golden_symbols.json

@@ -647,6 +647,9 @@
   {
     "name": "bloomHasToken"
   },
+  {
+    "name": "bootstrap"
+  },
   {
     "name": "callHook"
   },
@@ -1130,6 +1133,9 @@
   {
     "name": "init_bindings"
   },
+  {
+    "name": "init_bootstrap"
+  },
   {
     "name": "init_bootstrap_app_scoped"
   },
@@ -1811,6 +1817,9 @@
   {
     "name": "init_platform_core_providers"
   },
+  {
+    "name": "init_platform_destroy_listeners"
+  },
   {
     "name": "init_platform_ref"
   },
@@ -2147,6 +2156,9 @@
   {
     "name": "invokeTriggerCleanupFns"
   },
+  {
+    "name": "isApplicationBootstrapConfig"
+  },
   {
     "name": "isComponentDef"
   },

packages/core/test/bundling/forms_reactive/bundle.golden_symbols.json

@@ -812,6 +812,9 @@
   {
     "name": "bloomHasToken"
   },
+  {
+    "name": "bootstrap"
+  },
   {
     "name": "callHook"
   },
@@ -1361,6 +1364,9 @@
   {
     "name": "isAbstractControlOptions"
   },
+  {
+    "name": "isApplicationBootstrapConfig"
+  },
   {
     "name": "isArrayLike"
   },

packages/core/test/bundling/forms_template_driven/bundle.golden_symbols.json

@@ -791,6 +791,9 @@
   {
     "name": "booleanAttribute"
   },
+  {
+    "name": "bootstrap"
+  },
   {
     "name": "callHook"
   },
@@ -1319,6 +1322,9 @@
   {
     "name": "invokeHostBindingsInCreationMode"
   },
+  {
+    "name": "isApplicationBootstrapConfig"
+  },
   {
     "name": "isArrayLike"
   },

packages/core/test/bundling/hello_world/bundle.golden_symbols.json

@@ -434,6 +434,9 @@
   {
     "name": "bloomHasToken"
   },
+  {
+    "name": "bootstrap"
+  },
   {
     "name": "callHook"
   },
@@ -749,6 +752,9 @@
   {
     "name": "invokeHostBindingsInCreationMode"
   },
+  {
+    "name": "isApplicationBootstrapConfig"
+  },
   {
     "name": "isComponentDef"
   },

packages/core/test/bundling/hydration/bundle.golden_symbols.json

@@ -629,6 +629,9 @@
   {
     "name": "bloomHasToken"
   },
+  {
+    "name": "bootstrap"
+  },
   {
     "name": "calcSerializedContainerSize"
   },
@@ -1022,6 +1025,9 @@
   {
     "name": "invokeHostBindingsInCreationMode"
   },
+  {
+    "name": "isApplicationBootstrapConfig"
+  },
   {
     "name": "isArrayLike"
   },