Angular’s NG02802 warning means browser-side code accessed a response header that was not included in the server-rendered HttpTransferCache entry. Angular transfers no response headers by default. If the browser needs a header, add only that header to includeHeaders; otherwise, remove or move the header access.
What NG02802 means
During server-side rendering, Angular can cache eligible HttpClient responses and reuse them as the browser starts up, avoiding a duplicate request. The transfer cache does not include response headers by default, to limit unnecessary data transfer and avoid potential security issues. If client code tries to read a response header that was not transferred, Angular reports NG02802 and identifies the header and request URL. Angular’s NG02802 error page
As an Amazon Associate I earn from qualifying purchases.
Choose whether the browser needs the header
- It does not: Remove the browser-side read or move it to code that runs where the header is available. This avoids transferring data the application does not use.
- It does: Add that specific response header to the transfer-cache configuration. Do not include sensitive values, such as authentication tokens, unless your security design explicitly permits transferring them to the browser. Angular cautions that transferring sensitive headers can expose user-specific data. Angular’s server-side rendering guide
Include a response header in the transfer cache
Use request-level configuration when only one request needs the header:
this.http.get('/api/data', {
transferCache: { includeHeaders: ['cache-control', 'etag'] },
});Use hydration-wide configuration when the same headers are needed for eligible requests across the application:
#1 Best Overall
provideClientHydration(
withHttpTransferCacheOptions({
includeHeaders: ['ETag', 'Cache-Control'],
}),
);These are alternative scopes, not headers Angular includes automatically. List only the headers the browser needs, and check the API and header names against the Angular version used by your application. Angular documents both approaches on its NG02802 page and in its SSR guide.
Understand request-level overrides
A request’s transferCache option can override the application-wide transfer-cache settings for that request. If a global includeHeaders setting appears not to apply, inspect the specific request’s options as well. Angular SSR guide
Check whether the response is eligible for transfer
Including a header does not make every request eligible for transfer caching. Angular’s SSR guide says GET and HEAD requests are cached by default when eligible. By default, requests with Authorization, Proxy-Authorization, or Cookie headers; requests whose credential mode sends credentials; requests or responses with cache-control directives such as no-store, no-cache, or private; and responses carrying Set-Cookie are excluded. Review these conditions if the browser still makes a request instead of reusing the server-rendered response. Angular SSR guide
When server and browser request origins differ
If the server and browser reach the API using different origins, Angular may not recognize the requests as matching transfer-cache entries. The server-only HTTP_TRANSFER_CACHE_ORIGIN_MAP token can map the server origin to the client origin for matching. This addresses origin matching and cache reuse; it does not add response headers or directly fix NG02802. Angular SSR guide
Quick Recap
Rank #3
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
