angular/angular · error · RuntimeError

HTTP_ORIGIN_MAP_USED_IN_CLIENT

HTTP_ORIGIN_MAP_USED_IN_CLIENT

Error message

Angular detected that the `HTTP_TRANSFER_CACHE_ORIGIN_MAP` token is configured and present in the client side code. Please ensure that this token is only provided in the server code of the application.

What it means

Thrown by the transfer-cache code when HTTP_TRANSFER_CACHE_ORIGIN_MAP has a value while running in the browser (ngServerMode is false). The origin map exists solely to rewrite absolute API origins to internal ones during server-side rendering (so SSR fetches stay on the private network); shipping it to the client leaks internal topology and is meaningless there, so its presence in client-side DI is treated as a misconfiguration.

Source

Thrown at packages/common/http/src/transfer_cache.ts:212

 * @param transferState The transfer state to retrieve the cached response from.
 * @param originMap The origin map to map the request URL to the origin. (Not needed when `storeKey` is provided).
 * @param storeKey The key to use to store the cached response in the transfer state. (If not provided, it will be computed from the request and originMap).
 * @param skipUseCacheChecks Whether to skip the use cache checks. (Only disable when the checks have been performed beforehand).
 */
export function retrieveStateFromCache(
  req: HttpRequest<unknown>,
  options: CacheOptions,
  transferState: TransferState,
  originMap: Record<string, string> | null,
  storeKey?: StateKey<TransferHttpResponse>,
  skipUseCacheChecks = false,
): HttpResponse<unknown> | null {
  if (!skipUseCacheChecks && !canUseOrCacheRequest(req, options)) {
    return null;
  }

  if (typeof ngServerMode !== 'undefined' && !ngServerMode && originMap) {
    throw new RuntimeError(
      RuntimeErrorCode.HTTP_ORIGIN_MAP_USED_IN_CLIENT,
      ngDevMode &&
        'Angular detected that the `HTTP_TRANSFER_CACHE_ORIGIN_MAP` token is configured and ' +
          'present in the client side code. Please ensure that this token is only provided in the ' +
          'server code of the application.',
    );
  }

  if (!storeKey) {
    const requestUrl =
      typeof ngServerMode !== 'undefined' && ngServerMode && originMap
        ? mapRequestOriginUrl(req.url, originMap)
        : req.url;

    storeKey = makeCacheKey(req, requestUrl);
  }

  const response = transferState.get(storeKey, null);

View on GitHub (pinned to 51cb07e980)

Solutions

1. Move the HTTP_TRANSFER_CACHE_ORIGIN_MAP provider into the server-only configuration (app.config.server.ts / server providers array)
2. If configs are merged, gate it: isPlatformServer(platformId) ? {provide: HTTP_TRANSFER_CACHE_ORIGIN_MAP, ...} : []
3. Keep withTransferCacheOptions()/withHttpTransferCache in the shared config — only the origin map must be server-side
4. Verify with a browser-only build that the token no longer appears in client DI

Example fix

// before — app.config.ts shared by browser and server
export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(withHttpTransferCache(...)),
    {provide: HTTP_TRANSFER_CACHE_ORIGIN_MAP, useValue: {'https://api.example.com': 'http://internal:3000'}},
  ],
};

// after — map lives only in the server config (app.config.server.ts)
const serverConfig: ApplicationConfig = {
  providers: [
    {provide: HTTP_TRANSFER_CACHE_ORIGIN_MAP, useValue: {'https://api.example.com': 'http://internal:3000'}},
  ],
};

// build providers per platform
export function httpProviders(platformId: Object): Provider[] {
  const shared = [provideHttpClient(withHttpTransferCache({includePostRequests: false}))];
  return isPlatformServer(platformId)
    ? [...shared, {provide: HTTP_TRANSFER_CACHE_ORIGIN_MAP, useValue: SERVER_ORIGIN_MAP}]
    : shared;
}

When it happens

Trigger: Providing {provide: HTTP_TRANSFER_CACHE_ORIGIN_MAP, useValue: {...}} in app.config.ts (shared by browser and server bootstraps) instead of the server-only config; putting it in a shared providers array imported by both main.ts and server.ts.

Common situations: Adding the origin map while enabling SSR transfer cache on an existing app where app.config.ts is shared; refactoring that moves providers between shared and server configs; a monorepo shared UI lib that registers HTTP providers.

Related errors

• HTTP_ORIGIN_MAP_CONTAINS_PATH
• -2802
• Configuration error: found both withXsrfConfiguration() and
• Configuration error: withRequestsMadeViaParent() cannot be c
• withRequestsMadeViaParent() can only be used when the parent

AI-assisted analysis of angular/angular@51cb07e980 (2026-08-22). Data as JSON: /api/errors/39374db8c4cc7c72. Report an issue: GitHub.