angular/angular · error · Error

withRequestsMadeViaParent() can only be used when the parent

Error message

withRequestsMadeViaParent() can only be used when the parent injector also configures HttpClient

What it means

Thrown by the HttpBackend factory registered withRequestsMadeViaParent() when inject(HttpHandler, {skipSelf: true, optional: true}) returns null — i.e. no ancestor injector provides HttpHandler. The feature's whole contract is 'route this injector's requests through the parent's HTTP stack', so a missing parent configuration is a wiring error, not a runtime condition to recover from.

Source

Thrown at packages/common/http/src/provider.ts:290

 * `withRequestsMadeViaParent` to be used at multiple levels, which will cause the request to
 * "bubble up" until either reaching the root level or an `HttpClient` which was not configured with
 * this option.
 *
 * This feature cannot be combined with `withFetch` or `withXhr` in the same
 * `provideHttpClient()` call.
 *
 * @see [HTTP client setup](guide/http/setup#withrequestsmadeviaparent)
 * @see {@link provideHttpClient}
 * @publicApi 19.0
 */
export function withRequestsMadeViaParent(): HttpFeature<HttpFeatureKind.RequestsMadeViaParent> {
  return makeHttpFeature(HttpFeatureKind.RequestsMadeViaParent, [
    {
      provide: HttpBackend,
      useFactory: () => {
        const handlerFromParent = inject(HttpHandler, {skipSelf: true, optional: true});
        if (ngDevMode && handlerFromParent === null) {
          throw new Error(
            'withRequestsMadeViaParent() can only be used when the parent injector also configures HttpClient',
          );
        }
        return handlerFromParent;
      },
    },
  ]);
}

/**
 * Configures the current `HttpClient` instance to make requests using the fetch API.
 *
 * Note: The Fetch API doesn't support progress report on uploads.
 *
 * @see [Advanced fetch Options](guide/http/making-requests#advanced-fetch-options)
 *
 * @publicApi
 * @deprecated `withFetch` is not required anymore. `FetchBackend` is the default `HttpBackend`.

View on GitHub (pinned to 51cb07e980)

Solutions

  1. Provide HttpClient in the parent injector — e.g. keep provideHttpClient(withFetch(), …) in app.config.ts and use withRequestsMadeViaParent() only in lazy routes/components below it
  2. If there is no parent to delegate to, replace withRequestsMadeViaParent() with a normal provideHttpClient(...) with the backend/interceptors you need
  3. In unit tests, add the parent providers via TestBed.configureTestingModule({providers: [provideHttpClient()]});
  4. Check that you didn't accidentally put withRequestsMadeViaParent() in the root environment config

Example fix

// before — child delegates but nobody above configures HttpClient
// app.config.ts has NO provideHttpClient
@Component({providers: [provideHttpClient(withRequestsMadeViaParent())]})
class Widget {}

// after — parent (root) owns the stack, child reuses it
// app.config.ts:
providers: [provideHttpClient(withFetch(), withInterceptors([authInterceptor]))]
// widget providers:
providers: [provideHttpClient(withRequestsMadeViaParent())]
Defensive patterns

Strategy: validation

Validate before calling

function parentHttpConfigExists(): boolean {
  return inject(HttpHandler, {skipSelf: true, optional: true}) !== null;
}
// inside a provider/initializer in the child injector:
if (!parentHttpConfigExists()) {
  throw new Error('withRequestsMadeViaParent() used without a parent provideHttpClient()');
}

Try / catch

try {
  bootstrapApplication(AppComponent, appConfig); // HttpBackend factory throws here on first injection
} catch (err) {
  if ((err as Error).message.includes('withRequestsMadeViaParent')) {
    // add provideHttpClient(...) to the parent injector's providers and retry
  } else throw err;
}

Prevention

When it happens

Trigger: Using provideHttpClient(withRequestsMadeViaParent()) in a component/route whose injector chain (component tree or environment injector chain) never calls provideHttpClient; placing it in the root config where there is no parent; using it in a standalone bootstrap that also dropped the root HTTP config.

Common situations: Copying a lazy-route snippet into app.config.ts; refactoring the root provideHttpClient away (e.g. into a feature) while the child delegation remains; using TestBed where the parent injector has no HTTP providers.

Related errors


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