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

atscott · thePunderWoman · commit 2a4f488a6cb8 · 2024-07-30T18:03:35.000Z
This commit adds the `ImagePerformanceWarning` to the common bootstrap code rather than only starting it when using `bootstrapApplication`. PR Close #57060
diff --git a/packages/core/src/image_performance_warning.ts b/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();
+      }
     }
   }
 
diff --git a/packages/core/src/platform/bootstrap.ts b/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);
diff --git a/packages/core/test/bundling/animations-standalone/bundle.golden_symbols.json b/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"
   },
diff --git a/packages/core/test/bundling/animations/bundle.golden_symbols.json b/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"
   },
diff --git a/packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json b/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"
   },
diff --git a/packages/core/test/bundling/defer/bundle.golden_symbols.json b/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"
   },
diff --git a/packages/core/test/bundling/forms_reactive/bundle.golden_symbols.json b/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"
   },
diff --git a/packages/core/test/bundling/forms_template_driven/bundle.golden_symbols.json b/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"
   },
diff --git a/packages/core/test/bundling/hello_world/bundle.golden_symbols.json b/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"
   },
diff --git a/packages/core/test/bundling/hydration/bundle.golden_symbols.json b/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"
   },
diff --git a/packages/core/test/bundling/router/bundle.golden_symbols.json b/packages/core/test/bundling/router/bundle.golden_symbols.json
@@ -920,6 +920,9 @@
   {
     "name": "booleanAttribute"
   },
+  {
+    "name": "bootstrap"
+  },
   {
     "name": "callHook"
   },
@@ -1550,6 +1553,9 @@
   {
     "name": "invokeHostBindingsInCreationMode"
   },
+  {
+    "name": "isApplicationBootstrapConfig"
+  },
   {
     "name": "isArrayLike"
   },
diff --git a/packages/core/test/bundling/standalone_bootstrap/bundle.golden_symbols.json b/packages/core/test/bundling/standalone_bootstrap/bundle.golden_symbols.json
@@ -521,6 +521,9 @@
   {
     "name": "bloomHasToken"
   },
+  {
+    "name": "bootstrap"
+  },
   {
     "name": "callHook"
   },
@@ -839,6 +842,9 @@
   {
     "name": "invokeHostBindingsInCreationMode"
   },
+  {
+    "name": "isApplicationBootstrapConfig"
+  },
   {
     "name": "isComponentDef"
   },
diff --git a/packages/core/test/bundling/todo/bundle.golden_symbols.json b/packages/core/test/bundling/todo/bundle.golden_symbols.json
@@ -677,6 +677,9 @@
   {
     "name": "bloomHasToken"
   },
+  {
+    "name": "bootstrap"
+  },
   {
     "name": "callHook"
   },
@@ -1121,6 +1124,9 @@
   {
     "name": "invokeHostBindingsInCreationMode"
   },
+  {
+    "name": "isApplicationBootstrapConfig"
+  },
   {
     "name": "isComponentDef"
   },
diff --git a/packages/platform-browser/test/browser/bootstrap_spec.ts b/packages/platform-browser/test/browser/bootstrap_spec.ts
@@ -721,7 +721,7 @@ describe('bootstrap factory method', () => {
   it('should allow provideZoneChangeDetection in bootstrapModule', async () => {
     @NgModule({imports: [BrowserModule], providers: [provideZoneChangeDetection()]})
     class SomeModule {
-      ngDoBootstrap(){}
+      ngDoBootstrap() {}
     }
 
     await expectAsync(platformBrowserDynamic().bootstrapModule(SomeModule)).toBeResolved();

Original file line number	Diff line number	Diff line change
`@@ -701,6 +701,9 @@`
`701`	`701`	`{`
`702`	`702`	`"name": "bloomHasToken"`
`703`	`703`	`},`
	`704`	`+ {`
	`705`	`+ "name": "bootstrap"`
	`706`	`+ },`
`704`	`707`	`{`
`705`	`708`	`"name": "buildAnimationAst"`
`706`	`709`	`},`
`@@ -1118,6 +1121,9 @@`
`1118`	`1121`	`{`
`1119`	`1122`	`"name": "invokeQuery"`
`1120`	`1123`	`},`
	`1124`	`+ {`
	`1125`	`+ "name": "isApplicationBootstrapConfig"`
	`1126`	`+ },`
`1121`	`1127`	`{`
`1122`	`1128`	`"name": "isComponentDef"`
`1123`	`1129`	`},`
Original file line number	Diff line number	Diff line change
`@@ -755,6 +755,9 @@`
`755`	`755`	`{`
`756`	`756`	`"name": "bloomHasToken"`
`757`	`757`	`},`
	`758`	`+ {`
	`759`	`+ "name": "bootstrap"`
	`760`	`+ },`
`758`	`761`	`{`
`759`	`762`	`"name": "buildAnimationAst"`
`760`	`763`	`},`
`@@ -1184,6 +1187,9 @@`
`1184`	`1187`	`{`
`1185`	`1188`	`"name": "invokeQuery"`
`1186`	`1189`	`},`
	`1190`	`+ {`
	`1191`	`+ "name": "isApplicationBootstrapConfig"`
	`1192`	`+ },`
`1187`	`1193`	`{`
`1188`	`1194`	`"name": "isComponentDef"`
`1189`	`1195`	`},`
Original file line number	Diff line number	Diff line change
`@@ -572,6 +572,9 @@`
`572`	`572`	`{`
`573`	`573`	`"name": "bloomHasToken"`
`574`	`574`	`},`
	`575`	`+ {`
	`576`	`+ "name": "bootstrap"`
	`577`	`+ },`
`575`	`578`	`{`
`576`	`579`	`"name": "callHook"`
`577`	`580`	`},`
`@@ -938,6 +941,9 @@`
`938`	`941`	`{`
`939`	`942`	`"name": "invokeHostBindingsInCreationMode"`
`940`	`943`	`},`
	`944`	`+ {`
	`945`	`+ "name": "isApplicationBootstrapConfig"`
	`946`	`+ },`
`941`	`947`	`{`
`942`	`948`	`"name": "isComponentDef"`
`943`	`949`	`},`
Original file line number	Diff line number	Diff line change
`@@ -647,6 +647,9 @@`
`647`	`647`	`{`
`648`	`648`	`"name": "bloomHasToken"`
`649`	`649`	`},`
	`650`	`+ {`
	`651`	`+ "name": "bootstrap"`
	`652`	`+ },`
`650`	`653`	`{`
`651`	`654`	`"name": "callHook"`
`652`	`655`	`},`
`@@ -1130,6 +1133,9 @@`
`1130`	`1133`	`{`
`1131`	`1134`	`"name": "init_bindings"`
`1132`	`1135`	`},`
	`1136`	`+ {`
	`1137`	`+ "name": "init_bootstrap"`
	`1138`	`+ },`
`1133`	`1139`	`{`
`1134`	`1140`	`"name": "init_bootstrap_app_scoped"`
`1135`	`1141`	`},`
`@@ -1811,6 +1817,9 @@`
`1811`	`1817`	`{`
`1812`	`1818`	`"name": "init_platform_core_providers"`
`1813`	`1819`	`},`
	`1820`	`+ {`
	`1821`	`+ "name": "init_platform_destroy_listeners"`
	`1822`	`+ },`
`1814`	`1823`	`{`
`1815`	`1824`	`"name": "init_platform_ref"`
`1816`	`1825`	`},`
`@@ -2147,6 +2156,9 @@`
`2147`	`2156`	`{`
`2148`	`2157`	`"name": "invokeTriggerCleanupFns"`
`2149`	`2158`	`},`
	`2159`	`+ {`
	`2160`	`+ "name": "isApplicationBootstrapConfig"`
	`2161`	`+ },`
`2150`	`2162`	`{`
`2151`	`2163`	`"name": "isComponentDef"`
`2152`	`2164`	`},`
Original file line number	Diff line number	Diff line change
`@@ -812,6 +812,9 @@`
`812`	`812`	`{`
`813`	`813`	`"name": "bloomHasToken"`
`814`	`814`	`},`
	`815`	`+ {`
	`816`	`+ "name": "bootstrap"`
	`817`	`+ },`
`815`	`818`	`{`
`816`	`819`	`"name": "callHook"`
`817`	`820`	`},`
`@@ -1361,6 +1364,9 @@`
`1361`	`1364`	`{`
`1362`	`1365`	`"name": "isAbstractControlOptions"`
`1363`	`1366`	`},`
	`1367`	`+ {`
	`1368`	`+ "name": "isApplicationBootstrapConfig"`
	`1369`	`+ },`
`1364`	`1370`	`{`
`1365`	`1371`	`"name": "isArrayLike"`
`1366`	`1372`	`},`
Original file line number	Diff line number	Diff line change
`@@ -791,6 +791,9 @@`
`791`	`791`	`{`
`792`	`792`	`"name": "booleanAttribute"`
`793`	`793`	`},`
	`794`	`+ {`
	`795`	`+ "name": "bootstrap"`
	`796`	`+ },`
`794`	`797`	`{`
`795`	`798`	`"name": "callHook"`
`796`	`799`	`},`
`@@ -1319,6 +1322,9 @@`
`1319`	`1322`	`{`
`1320`	`1323`	`"name": "invokeHostBindingsInCreationMode"`
`1321`	`1324`	`},`
	`1325`	`+ {`
	`1326`	`+ "name": "isApplicationBootstrapConfig"`
	`1327`	`+ },`
`1322`	`1328`	`{`
`1323`	`1329`	`"name": "isArrayLike"`
`1324`	`1330`	`},`
Original file line number	Diff line number	Diff line change
`@@ -434,6 +434,9 @@`
`434`	`434`	`{`
`435`	`435`	`"name": "bloomHasToken"`
`436`	`436`	`},`
	`437`	`+ {`
	`438`	`+ "name": "bootstrap"`
	`439`	`+ },`
`437`	`440`	`{`
`438`	`441`	`"name": "callHook"`
`439`	`442`	`},`
`@@ -749,6 +752,9 @@`
`749`	`752`	`{`
`750`	`753`	`"name": "invokeHostBindingsInCreationMode"`
`751`	`754`	`},`
	`755`	`+ {`
	`756`	`+ "name": "isApplicationBootstrapConfig"`
	`757`	`+ },`
`752`	`758`	`{`
`753`	`759`	`"name": "isComponentDef"`
`754`	`760`	`},`
Original file line number	Diff line number	Diff line change
`@@ -629,6 +629,9 @@`
`629`	`629`	`{`
`630`	`630`	`"name": "bloomHasToken"`
`631`	`631`	`},`
	`632`	`+ {`
	`633`	`+ "name": "bootstrap"`
	`634`	`+ },`
`632`	`635`	`{`
`633`	`636`	`"name": "calcSerializedContainerSize"`
`634`	`637`	`},`
`@@ -1022,6 +1025,9 @@`
`1022`	`1025`	`{`
`1023`	`1026`	`"name": "invokeHostBindingsInCreationMode"`
`1024`	`1027`	`},`
	`1028`	`+ {`
	`1029`	`+ "name": "isApplicationBootstrapConfig"`
	`1030`	`+ },`
`1025`	`1031`	`{`
`1026`	`1032`	`"name": "isArrayLike"`
`1027`	`1033`	`},`