feat(platform-browser): resolve JIT resources in createApplication

dgp1130 · AndrewKushnir · commit ab67988d2e52 · 2025-11-10T14:18:29.000-08:00
Previously, `createApplication` didn't work with JIT components. This commit brings it closer to feature parity with `bootstrapApplication`.
diff --git a/packages/platform-browser/src/browser.ts b/packages/platform-browser/src/browser.ts
@@ -124,7 +124,7 @@ export interface BootstrapContext {
  *
  * @publicApi
  */
-export function bootstrapApplication(
+export async function bootstrapApplication(
   rootComponent: Type<unknown>,
   options?: ApplicationConfig,
   context?: BootstrapContext,
@@ -135,15 +135,8 @@ export function bootstrapApplication(
     ...createProvidersConfig(options),
   };
 
-  // Attempt to resolve component resources before bootstrapping in JIT mode,
-  // however don't interrupt the bootstrapping process.
   if ((typeof ngJitMode === 'undefined' || ngJitMode) && typeof fetch === 'function') {
-    return resolveComponentResources(fetch)
-      .catch((error) => {
-        console.error(error);
-        return Promise.resolve();
-      })
-      .then(() => internalCreateApplication(config));
+    await resolveJitResources();
   }
 
   return internalCreateApplication(config);
@@ -161,7 +154,11 @@ export function bootstrapApplication(
  *
  * @publicApi
  */
-export function createApplication(options?: ApplicationConfig): Promise<ApplicationRef> {
+export async function createApplication(options?: ApplicationConfig): Promise<ApplicationRef> {
+  if ((typeof ngJitMode === 'undefined' || ngJitMode) && typeof fetch === 'function') {
+    await resolveJitResources();
+  }
+
   return internalCreateApplication(createProvidersConfig(options));
 }
 
@@ -172,6 +169,17 @@ function createProvidersConfig(options?: ApplicationConfig) {
   };
 }
 
+/** Attempt to resolve component resources before bootstrapping in JIT mode. */
+async function resolveJitResources(): Promise<void> {
+  try {
+    return await resolveComponentResources(fetch);
+  } catch (error) {
+    // Log, but don't block bootstrapping on error.
+    // tslint:disable-next-line:no-console
+    console.error(error);
+  }
+}
+
 /**
  * Returns a set of providers required to setup [Testability](api/core/Testability) for an
  * application bootstrapped using the `bootstrapApplication` function. The set of providers is
diff --git a/packages/platform-browser/test/browser/bootstrap_standalone_spec.ts b/packages/platform-browser/test/browser/bootstrap_standalone_spec.ts
@@ -19,10 +19,10 @@ import {
   ɵR3Injector as R3Injector,
   ɵNoopNgZone as NoopNgZone,
   APP_ID,
+  signal,
 } from '@angular/core';
-import {withBody} from '@angular/private/testing';
-
-import {bootstrapApplication, BrowserModule} from '../../src/browser';
+import {isNode, withBody} from '@angular/private/testing';
+import {bootstrapApplication, BrowserModule, createApplication} from '../../src/browser';
 
 describe('bootstrapApplication for standalone components', () => {
   beforeEach(destroyPlatform);
@@ -271,3 +271,54 @@ describe('bootstrapApplication for standalone components', () => {
     });
   });
 });
+
+describe('createApplication', () => {
+  beforeEach(destroyPlatform);
+  afterEach(destroyPlatform);
+
+  it(
+    'creates an `ApplicationRef` which can bootstrap a component',
+    withBody('<test-app></test-app>', async () => {
+      @Component({
+        selector: 'test-app',
+        template: `Hello, {{ name() }}!`,
+      })
+      class TestComp {
+        protected readonly name = signal('Dev');
+      }
+
+      const appRef = await createApplication();
+      appRef.bootstrap(TestComp);
+
+      expect(document.body.textContent.trim()).toBe('Hello, Dev!');
+    }),
+  );
+
+  it(
+    'creates an `ApplicationRef` which can bootstrap a JIT component with an external resource',
+    withBody('<test-app></test-app>', async () => {
+      // Resolving resources only makes sense in the browser.
+      if (isNode) {
+        expect().nothing();
+        return;
+      }
+
+      const templateUrl = URL.createObjectURL(new Blob(['Hello, {{ name() }}!']));
+
+      @Component({
+        selector: 'test-app',
+        templateUrl,
+      })
+      class TestComp {
+        protected readonly name = signal('Dev');
+      }
+
+      const appRef = await createApplication();
+      appRef.bootstrap(TestComp);
+
+      expect(document.body.textContent.trim()).toBe('Hello, Dev!');
+
+      URL.revokeObjectURL(templateUrl);
+    }),
+  );
+});
