fix(core): properly recognize failed fetch responses when loading external resources in JIT (#62992)

devversion · crisbeto · commit c9f3976eba66 · 2025-08-05T10:10:57.000+02:00
Currently when loading external resources in JIT, when `fetch` fails, the `text` is empty and the component is loading. This hides the actual underlying fetch error. We should properly detect this and error out. PR Close #62992
diff --git a/goldens/public-api/core/errors.api.md b/goldens/public-api/core/errors.api.md
@@ -42,6 +42,8 @@ export const enum RuntimeErrorCode {
     // (undocumented)
     EXPRESSION_CHANGED_AFTER_CHECKED = -100,
     // (undocumented)
+    EXTERNAL_RESOURCE_LOADING_FAILED = 918,
+    // (undocumented)
     HOST_DIRECTIVE_COMPONENT = 310,
     // (undocumented)
     HOST_DIRECTIVE_CONFLICTING_ALIAS = 312,
diff --git a/packages/core/src/errors.ts b/packages/core/src/errors.ts
@@ -126,6 +126,7 @@ export const enum RuntimeErrorCode {
   MISSING_NG_MODULE_DEFINITION = 915,
   MISSING_DIRECTIVE_DEFINITION = 916,
   NO_COMPONENT_FACTORY_FOUND = 917,
+  EXTERNAL_RESOURCE_LOADING_FAILED = 918,
 
   // Signal integration errors
   REQUIRED_INPUT_NO_VALUE = -950,
@@ -143,7 +144,7 @@ export const enum RuntimeErrorCode {
   RUNTIME_DEPS_INVALID_IMPORTED_TYPE = 980,
   RUNTIME_DEPS_ORPHAN_COMPONENT = 981,
 
-  // Resource errors
+  // resource() API errors
   MUST_PROVIDE_STREAM_OPTION = 990,
   RESOURCE_COMPLETED_BEFORE_PRODUCING_VALUE = 991,
 
diff --git a/packages/core/src/metadata/resource_loading.ts b/packages/core/src/metadata/resource_loading.ts
@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
+import {RuntimeError, RuntimeErrorCode} from '../errors';
 import {Type} from '../interface/type';
 
 import type {Component} from './directives';
@@ -43,7 +44,7 @@ import type {Component} from './directives';
  * contents of the resolved URL. Browser's `fetch()` method is a good default implementation.
  */
 export function resolveComponentResources(
-  resourceResolver: (url: string) => Promise<string | {text(): Promise<string>}>,
+  resourceResolver: (url: string) => Promise<string | {text(): Promise<string>; status?: number}>,
 ): Promise<void> {
   // Store all promises which are fetching the resources.
   const componentResolved: Promise<void>[] = [];
@@ -54,7 +55,7 @@ export function resolveComponentResources(
     let promise = urlMap.get(url);
     if (!promise) {
       const resp = resourceResolver(url);
-      urlMap.set(url, (promise = resp.then(unwrapResponse)));
+      urlMap.set(url, (promise = resp.then((res) => unwrapResponse(url, res))));
     }
     return promise;
   }
@@ -147,8 +148,22 @@ export function isComponentResourceResolutionQueueEmpty() {
   return componentResourceResolutionQueue.size === 0;
 }
 
-function unwrapResponse(response: string | {text(): Promise<string>}): string | Promise<string> {
-  return typeof response == 'string' ? response : response.text();
+function unwrapResponse(
+  url: string,
+  response: string | {text(): Promise<string>; status?: number},
+): string | Promise<string> {
+  if (typeof response === 'string') {
+    return response;
+  }
+  if (response.status !== undefined && response.status !== 200) {
+    return Promise.reject(
+      new RuntimeError(
+        RuntimeErrorCode.EXTERNAL_RESOURCE_LOADING_FAILED,
+        ngDevMode && `Could not load resource: ${url}. Response status: ${response.status}`,
+      ),
+    );
+  }
+  return response.text();
 }
 
 function componentDefResolved(type: Type<any>): void {
diff --git a/packages/core/test/metadata/resource_loading_spec.ts b/packages/core/test/metadata/resource_loading_spec.ts
@@ -198,5 +198,22 @@ Did you run and wait for 'resolveComponentResources()'?`.trim(),
       expect(MyComponent.ɵcmp).toBeDefined();
       expect(metadata.template).toBe('response for test://content');
     });
+
+    it('should fail when fetch is resolving to a 404', async () => {
+      const MyComponent: ComponentType<any> = class MyComponent {} as any;
+      const metadata: Component = {templateUrl: 'test://content'};
+      compileComponent(MyComponent, metadata);
+
+      await expectAsync(
+        resolveComponentResources(async () => {
+          return {
+            async text() {
+              return 'File not found';
+            },
+            status: 404,
+          };
+        }),
+      ).toBeRejectedWithError(/Could not load resource.*404/);
+    });
   });
 });
