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

devversion · devversion · commit 461937511ab7 · 2025-08-04T19:17:55.000Z
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.
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 !== 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 {
