@angular/common 20.2.0 → 21.0.0-next.0

package/fesm2022/module.mjs

@@ -1,42 +1,15 @@
 /**
- * @license Angular v20.2.0
+ * @license Angular v21.0.0-next.0
  * (c) 2010-2025 Google LLC. https://angular.io/
  * License: MIT
  */
 
 import * as i0 from '@angular/core';
-import { ɵRuntimeError as _RuntimeError, Injectable, InjectionToken, inject, NgZone, DestroyRef, ɵformatRuntimeError as _formatRuntimeError, PendingTasks, ɵConsole as _Console, runInInjectionContext, DOCUMENT, Inject, makeEnvironmentProviders, NgModule } from '@angular/core';
-import { concatMap, filter, map, finalize, switchMap } from 'rxjs/operators';
-import { of, Observable, from } from 'rxjs';
+import { ɵRuntimeError as _RuntimeError, InjectionToken, inject, NgZone, DestroyRef, Injectable, ɵformatRuntimeError as _formatRuntimeError, runInInjectionContext, PendingTasks, ɵConsole as _Console, DOCUMENT, Inject, makeEnvironmentProviders, NgModule } from '@angular/core';
+import { switchMap, finalize, concatMap, filter, map } from 'rxjs/operators';
+import { Observable, from, of } from 'rxjs';
 import { XhrFactory, parseCookieValue } from './xhr.mjs';
 
-/**
- * Transforms an `HttpRequest` into a stream of `HttpEvent`s, one of which will likely be a
- * `HttpResponse`.
- *
- * `HttpHandler` is injectable. When injected, the handler instance dispatches requests to the
- * first interceptor in the chain, which dispatches to the second, etc, eventually reaching the
- * `HttpBackend`.
- *
- * In an `HttpInterceptor`, the `HttpHandler` parameter is the next interceptor in the chain.
- *
- * @publicApi
- */
-class HttpHandler {
-}
-/**
- * A final `HttpHandler` which will dispatch the request via browser HTTP APIs to a backend.
- *
- * Interceptors sit between the `HttpClient` interface and the `HttpBackend`.
- *
- * When injected, `HttpBackend` dispatches requests directly to the backend, without going
- * through the interceptor chain.
- *
- * @publicApi
- */
-class HttpBackend {
-}
-
 /**
  * Represents the header configuration options for an HTTP request.
  * Instances are immutable. Modifying methods return a cloned
@@ -288,6 +261,106 @@ function assertValidHeaders(headers) {
     }
 }
 
+/**
+ * A token used to manipulate and access values stored in `HttpContext`.
+ *
+ * @publicApi
+ */
+class HttpContextToken {
+    defaultValue;
+    constructor(defaultValue) {
+        this.defaultValue = defaultValue;
+    }
+}
+/**
+ * Http context stores arbitrary user defined values and ensures type safety without
+ * actually knowing the types. It is backed by a `Map` and guarantees that keys do not clash.
+ *
+ * This context is mutable and is shared between cloned requests unless explicitly specified.
+ *
+ * @usageNotes
+ *
+ * ### Usage Example
+ *
+ * ```ts
+ * // inside cache.interceptors.ts
+ * export const IS_CACHE_ENABLED = new HttpContextToken<boolean>(() => false);
+ *
+ * export class CacheInterceptor implements HttpInterceptor {
+ *
+ *   intercept(req: HttpRequest<any>, delegate: HttpHandler): Observable<HttpEvent<any>> {
+ *     if (req.context.get(IS_CACHE_ENABLED) === true) {
+ *       return ...;
+ *     }
+ *     return delegate.handle(req);
+ *   }
+ * }
+ *
+ * // inside a service
+ *
+ * this.httpClient.get('/api/weather', {
+ *   context: new HttpContext().set(IS_CACHE_ENABLED, true)
+ * }).subscribe(...);
+ * ```
+ *
+ * @publicApi
+ */
+class HttpContext {
+    map = new Map();
+    /**
+     * Store a value in the context. If a value is already present it will be overwritten.
+     *
+     * @param token The reference to an instance of `HttpContextToken`.
+     * @param value The value to store.
+     *
+     * @returns A reference to itself for easy chaining.
+     */
+    set(token, value) {
+        this.map.set(token, value);
+        return this;
+    }
+    /**
+     * Retrieve the value associated with the given token.
+     *
+     * @param token The reference to an instance of `HttpContextToken`.
+     *
+     * @returns The stored value or default if one is defined.
+     */
+    get(token) {
+        if (!this.map.has(token)) {
+            this.map.set(token, token.defaultValue());
+        }
+        return this.map.get(token);
+    }
+    /**
+     * Delete the value associated with the given token.
+     *
+     * @param token The reference to an instance of `HttpContextToken`.
+     *
+     * @returns A reference to itself for easy chaining.
+     */
+    delete(token) {
+        this.map.delete(token);
+        return this;
+    }
+    /**
+     * Checks for existence of a given token.
+     *
+     * @param token The reference to an instance of `HttpContextToken`.
+     *
+     * @returns True if the token exists, false otherwise.
+     */
+    has(token) {
+        return this.map.has(token);
+    }
+    /**
+     * @returns a list of tokens currently stored in the context.
+     */
+    keys() {
+        return this.map.keys();
+    }
+}
+
 /**
  * Provides encoding and decoding of URL parameter and query-string values.
  *
@@ -559,106 +632,6 @@ class HttpParams {
     }
 }
 
-/**
- * A token used to manipulate and access values stored in `HttpContext`.
- *
- * @publicApi
- */
-class HttpContextToken {
-    defaultValue;
-    constructor(defaultValue) {
-        this.defaultValue = defaultValue;
-    }
-}
-/**
- * Http context stores arbitrary user defined values and ensures type safety without
- * actually knowing the types. It is backed by a `Map` and guarantees that keys do not clash.
- *
- * This context is mutable and is shared between cloned requests unless explicitly specified.
- *
- * @usageNotes
- *
- * ### Usage Example
- *
- * ```ts
- * // inside cache.interceptors.ts
- * export const IS_CACHE_ENABLED = new HttpContextToken<boolean>(() => false);
- *
- * export class CacheInterceptor implements HttpInterceptor {
- *
- *   intercept(req: HttpRequest<any>, delegate: HttpHandler): Observable<HttpEvent<any>> {
- *     if (req.context.get(IS_CACHE_ENABLED) === true) {
- *       return ...;
- *     }
- *     return delegate.handle(req);
- *   }
- * }
- *
- * // inside a service
- *
- * this.httpClient.get('/api/weather', {
- *   context: new HttpContext().set(IS_CACHE_ENABLED, true)
- * }).subscribe(...);
- * ```
- *
- * @publicApi
- */
-class HttpContext {
-    map = new Map();
-    /**
-     * Store a value in the context. If a value is already present it will be overwritten.
-     *
-     * @param token The reference to an instance of `HttpContextToken`.
-     * @param value The value to store.
-     *
-     * @returns A reference to itself for easy chaining.
-     */
-    set(token, value) {
-        this.map.set(token, value);
-        return this;
-    }
-    /**
-     * Retrieve the value associated with the given token.
-     *
-     * @param token The reference to an instance of `HttpContextToken`.
-     *
-     * @returns The stored value or default if one is defined.
-     */
-    get(token) {
-        if (!this.map.has(token)) {
-            this.map.set(token, token.defaultValue());
-        }
-        return this.map.get(token);
-    }
-    /**
-     * Delete the value associated with the given token.
-     *
-     * @param token The reference to an instance of `HttpContextToken`.
-     *
-     * @returns A reference to itself for easy chaining.
-     */
-    delete(token) {
-        this.map.delete(token);
-        return this;
-    }
-    /**
-     * Checks for existence of a given token.
-     *
-     * @param token The reference to an instance of `HttpContextToken`.
-     *
-     * @returns True if the token exists, false otherwise.
-     */
-    has(token) {
-        return this.map.has(token);
-    }
-    /**
-     * @returns a list of tokens currently stored in the context.
-     */
-    keys() {
-        return this.map.keys();
-    }
-}
-
 /**
  * Determine whether the given HTTP method may include a body.
  */
@@ -1361,421 +1334,95 @@ var HttpStatusCode;
     HttpStatusCode[HttpStatusCode["NetworkAuthenticationRequired"] = 511] = "NetworkAuthenticationRequired";
 })(HttpStatusCode || (HttpStatusCode = {}));
 
+const XSSI_PREFIX$1 = /^\)\]\}',?\n/;
 /**
- * Constructs an instance of `HttpRequestOptions<T>` from a source `HttpMethodOptions` and
- * the given `body`. This function clones the object and adds the body.
+ * Determine an appropriate URL for the response, by checking either
+ * response url or the X-Request-URL header.
+ */
+function getResponseUrl$1(response) {
+    if (response.url) {
+        return response.url;
+    }
+    // stored as lowercase in the map
+    const xRequestUrl = X_REQUEST_URL_HEADER.toLocaleLowerCase();
+    return response.headers.get(xRequestUrl);
+}
+/**
+ * An internal injection token to reference `FetchBackend` implementation
+ * in a tree-shakable way.
+ */
+const FETCH_BACKEND = new InjectionToken(typeof ngDevMode === 'undefined' || ngDevMode ? 'FETCH_BACKEND' : '');
+/**
+ * Uses `fetch` to send requests to a backend server.
  *
- * Note that the `responseType` *options* value is a String that identifies the
- * single data type of the response.
- * A single overload version of the method handles each response type.
- * The value of `responseType` cannot be a union, as the combined signature could imply.
+ * This `FetchBackend` requires the support of the
+ * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) which is available on all
+ * supported browsers and on Node.js v18 or later.
  *
- */
-function addBody(options, body) {
-    return {
-        body,
-        headers: options.headers,
-        context: options.context,
-        observe: options.observe,
-        params: options.params,
-        reportProgress: options.reportProgress,
-        responseType: options.responseType,
-        withCredentials: options.withCredentials,
-        credentials: options.credentials,
-        transferCache: options.transferCache,
-        timeout: options.timeout,
-        keepalive: options.keepalive,
-        priority: options.priority,
-        cache: options.cache,
-        mode: options.mode,
-        redirect: options.redirect,
-        integrity: options.integrity,
-        referrer: options.referrer,
-    };
-}
-/**
- * Performs HTTP requests.
- * This service is available as an injectable class, with methods to perform HTTP requests.
- * Each request method has multiple signatures, and the return type varies based on
- * the signature that is called (mainly the values of `observe` and `responseType`).
- *
- * Note that the `responseType` *options* value is a String that identifies the
- * single data type of the response.
- * A single overload version of the method handles each response type.
- * The value of `responseType` cannot be a union, as the combined signature could imply.
- *
- * @usageNotes
- *
- * ### HTTP Request Example
- *
- * ```ts
- *  // GET heroes whose name contains search term
- * searchHeroes(term: string): observable<Hero[]>{
- *
- *  const params = new HttpParams({fromString: 'name=term'});
- *    return this.httpClient.request('GET', this.heroesUrl, {responseType:'json', params});
- * }
- * ```
- *
- * Alternatively, the parameter string can be used without invoking HttpParams
- * by directly joining to the URL.
- * ```ts
- * this.httpClient.request('GET', this.heroesUrl + '?' + 'name=term', {responseType:'json'});
- * ```
- *
- *
- * ### JSONP Example
- * ```ts
- * requestJsonp(url, callback = 'callback') {
- *  return this.httpClient.jsonp(this.heroesURL, callback);
- * }
- * ```
- *
- * ### PATCH Example
- * ```ts
- * // PATCH one of the heroes' name
- * patchHero (id: number, heroName: string): Observable<{}> {
- * const url = `${this.heroesUrl}/${id}`;   // PATCH api/heroes/42
- *  return this.httpClient.patch(url, {name: heroName}, httpOptions)
- *    .pipe(catchError(this.handleError('patchHero')));
- * }
- * ```
- *
- * @see [HTTP Guide](guide/http)
- * @see [HTTP Request](api/common/http/HttpRequest)
+ * @see {@link HttpHandler}
  *
  * @publicApi
  */
-class HttpClient {
-    handler;
-    constructor(handler) {
-        this.handler = handler;
+class FetchBackend {
+    // We use an arrow function to always reference the current global implementation of `fetch`.
+    // This is helpful for cases when the global `fetch` implementation is modified by external code,
+    // see https://github.com/angular/angular/issues/57527.
+    fetchImpl = inject(FetchFactory, { optional: true })?.fetch ?? ((...args) => globalThis.fetch(...args));
+    ngZone = inject(NgZone);
+    destroyRef = inject(DestroyRef);
+    destroyed = false;
+    constructor() {
+        this.destroyRef.onDestroy(() => {
+            this.destroyed = true;
+        });
     }
-    /**
-     * Constructs an observable for a generic HTTP request that, when subscribed,
-     * fires the request through the chain of registered interceptors and on to the
-     * server.
-     *
-     * You can pass an `HttpRequest` directly as the only parameter. In this case,
-     * the call returns an observable of the raw `HttpEvent` stream.
-     *
-     * Alternatively you can pass an HTTP method as the first parameter,
-     * a URL string as the second, and an options hash containing the request body as the third.
-     * See `addBody()`. In this case, the specified `responseType` and `observe` options determine the
-     * type of returned observable.
-     *   * The `responseType` value determines how a successful response body is parsed.
-     *   * If `responseType` is the default `json`, you can pass a type interface for the resulting
-     * object as a type parameter to the call.
-     *
-     * The `observe` value determines the return type, according to what you are interested in
-     * observing.
-     *   * An `observe` value of events returns an observable of the raw `HttpEvent` stream, including
-     * progress events by default.
-     *   * An `observe` value of response returns an observable of `HttpResponse<T>`,
-     * where the `T` parameter depends on the `responseType` and any optionally provided type
-     * parameter.
-     *   * An `observe` value of body returns an observable of `<T>` with the same `T` body type.
-     *
-     */
-    request(first, url, options = {}) {
-        let req;
-        // First, check whether the primary argument is an instance of `HttpRequest`.
-        if (first instanceof HttpRequest) {
-            // It is. The other arguments must be undefined (per the signatures) and can be
-            // ignored.
-            req = first;
-        }
-        else {
-            // It's a string, so it represents a URL. Construct a request based on it,
-            // and incorporate the remaining arguments (assuming `GET` unless a method is
-            // provided.
-            // Figure out the headers.
-            let headers = undefined;
-            if (options.headers instanceof HttpHeaders) {
-                headers = options.headers;
-            }
-            else {
-                headers = new HttpHeaders(options.headers);
+    handle(request) {
+        return new Observable((observer) => {
+            const aborter = new AbortController();
+            this.doRequest(request, aborter.signal, observer).then(noop, (error) => observer.error(new HttpErrorResponse({ error })));
+            let timeoutId;
+            if (request.timeout) {
+                // TODO: Replace with AbortSignal.any([aborter.signal, AbortSignal.timeout(request.timeout)])
+                // when AbortSignal.any support is Baseline widely available (NET nov. 2026)
+                timeoutId = this.ngZone.runOutsideAngular(() => setTimeout(() => {
+                    if (!aborter.signal.aborted) {
+                        aborter.abort(new DOMException('signal timed out', 'TimeoutError'));
+                    }
+                }, request.timeout));
             }
-            // Sort out parameters.
-            let params = undefined;
-            if (!!options.params) {
-                if (options.params instanceof HttpParams) {
-                    params = options.params;
-                }
-                else {
-                    params = new HttpParams({ fromObject: options.params });
+            return () => {
+                if (timeoutId !== undefined) {
+                    clearTimeout(timeoutId);
                 }
-            }
-            // Construct the request.
-            req = new HttpRequest(first, url, options.body !== undefined ? options.body : null, {
-                headers,
-                context: options.context,
-                params,
-                reportProgress: options.reportProgress,
-                // By default, JSON is assumed to be returned for all calls.
-                responseType: options.responseType || 'json',
-                withCredentials: options.withCredentials,
-                transferCache: options.transferCache,
-                keepalive: options.keepalive,
-                priority: options.priority,
-                cache: options.cache,
-                mode: options.mode,
-                redirect: options.redirect,
-                credentials: options.credentials,
-                referrer: options.referrer,
-                integrity: options.integrity,
-                timeout: options.timeout,
-            });
+                aborter.abort();
+            };
+        });
+    }
+    async doRequest(request, signal, observer) {
+        const init = this.createRequestInit(request);
+        let response;
+        try {
+            // Run fetch outside of Angular zone.
+            // This is due to Node.js fetch implementation (Undici) which uses a number of setTimeouts to check if
+            // the response should eventually timeout which causes extra CD cycles every 500ms
+            const fetchPromise = this.ngZone.runOutsideAngular(() => this.fetchImpl(request.urlWithParams, { signal, ...init }));
+            // Make sure Zone.js doesn't trigger false-positive unhandled promise
+            // error in case the Promise is rejected synchronously. See function
+            // description for additional information.
+            silenceSuperfluousUnhandledPromiseRejection(fetchPromise);
+            // Send the `Sent` event before awaiting the response.
+            observer.next({ type: HttpEventType.Sent });
+            response = await fetchPromise;
         }
-        // Start with an Observable.of() the initial request, and run the handler (which
-        // includes all interceptors) inside a concatMap(). This way, the handler runs
-        // inside an Observable chain, which causes interceptors to be re-run on every
-        // subscription (this also makes retries re-run the handler, including interceptors).
-        const events$ = of(req).pipe(concatMap((req) => this.handler.handle(req)));
-        // If coming via the API signature which accepts a previously constructed HttpRequest,
-        // the only option is to get the event stream. Otherwise, return the event stream if
-        // that is what was requested.
-        if (first instanceof HttpRequest || options.observe === 'events') {
-            return events$;
-        }
-        // The requested stream contains either the full response or the body. In either
-        // case, the first step is to filter the event stream to extract a stream of
-        // responses(s).
-        const res$ = (events$.pipe(filter((event) => event instanceof HttpResponse)));
-        // Decide which stream to return.
-        switch (options.observe || 'body') {
-            case 'body':
-                // The requested stream is the body. Map the response stream to the response
-                // body. This could be done more simply, but a misbehaving interceptor might
-                // transform the response body into a different format and ignore the requested
-                // responseType. Guard against this by validating that the response is of the
-                // requested type.
-                switch (req.responseType) {
-                    case 'arraybuffer':
-                        return res$.pipe(map((res) => {
-                            // Validate that the body is an ArrayBuffer.
-                            if (res.body !== null && !(res.body instanceof ArrayBuffer)) {
-                                throw new _RuntimeError(2806 /* RuntimeErrorCode.RESPONSE_IS_NOT_AN_ARRAY_BUFFER */, ngDevMode && 'Response is not an ArrayBuffer.');
-                            }
-                            return res.body;
-                        }));
-                    case 'blob':
-                        return res$.pipe(map((res) => {
-                            // Validate that the body is a Blob.
-                            if (res.body !== null && !(res.body instanceof Blob)) {
-                                throw new _RuntimeError(2807 /* RuntimeErrorCode.RESPONSE_IS_NOT_A_BLOB */, ngDevMode && 'Response is not a Blob.');
-                            }
-                            return res.body;
-                        }));
-                    case 'text':
-                        return res$.pipe(map((res) => {
-                            // Validate that the body is a string.
-                            if (res.body !== null && typeof res.body !== 'string') {
-                                throw new _RuntimeError(2808 /* RuntimeErrorCode.RESPONSE_IS_NOT_A_STRING */, ngDevMode && 'Response is not a string.');
-                            }
-                            return res.body;
-                        }));
-                    case 'json':
-                    default:
-                        // No validation needed for JSON responses, as they can be of any type.
-                        return res$.pipe(map((res) => res.body));
-                }
-            case 'response':
-                // The response stream was requested directly, so return it.
-                return res$;
-            default:
-                // Guard against new future observe types being added.
-                throw new _RuntimeError(2809 /* RuntimeErrorCode.UNHANDLED_OBSERVE_TYPE */, ngDevMode && `Unreachable: unhandled observe type ${options.observe}}`);
-        }
-    }
-    /**
-     * Constructs an observable that, when subscribed, causes the configured
-     * `DELETE` request to execute on the server. See the individual overloads for
-     * details on the return type.
-     *
-     * @param url     The endpoint URL.
-     * @param options The HTTP options to send with the request.
-     *
-     */
-    delete(url, options = {}) {
-        return this.request('DELETE', url, options);
-    }
-    /**
-     * Constructs an observable that, when subscribed, causes the configured
-     * `GET` request to execute on the server. See the individual overloads for
-     * details on the return type.
-     */
-    get(url, options = {}) {
-        return this.request('GET', url, options);
-    }
-    /**
-     * Constructs an observable that, when subscribed, causes the configured
-     * `HEAD` request to execute on the server. The `HEAD` method returns
-     * meta information about the resource without transferring the
-     * resource itself. See the individual overloads for
-     * details on the return type.
-     */
-    head(url, options = {}) {
-        return this.request('HEAD', url, options);
-    }
-    /**
-     * Constructs an `Observable` that, when subscribed, causes a request with the special method
-     * `JSONP` to be dispatched via the interceptor pipeline.
-     * The [JSONP pattern](https://en.wikipedia.org/wiki/JSONP) works around limitations of certain
-     * API endpoints that don't support newer,
-     * and preferable [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) protocol.
-     * JSONP treats the endpoint API as a JavaScript file and tricks the browser to process the
-     * requests even if the API endpoint is not located on the same domain (origin) as the client-side
-     * application making the request.
-     * The endpoint API must support JSONP callback for JSONP requests to work.
-     * The resource API returns the JSON response wrapped in a callback function.
-     * You can pass the callback function name as one of the query parameters.
-     * Note that JSONP requests can only be used with `GET` requests.
-     *
-     * @param url The resource URL.
-     * @param callbackParam The callback function name.
-     *
-     */
-    jsonp(url, callbackParam) {
-        return this.request('JSONP', url, {
-            params: new HttpParams().append(callbackParam, 'JSONP_CALLBACK'),
-            observe: 'body',
-            responseType: 'json',
-        });
-    }
-    /**
-     * Constructs an `Observable` that, when subscribed, causes the configured
-     * `OPTIONS` request to execute on the server. This method allows the client
-     * to determine the supported HTTP methods and other capabilities of an endpoint,
-     * without implying a resource action. See the individual overloads for
-     * details on the return type.
-     */
-    options(url, options = {}) {
-        return this.request('OPTIONS', url, options);
-    }
-    /**
-     * Constructs an observable that, when subscribed, causes the configured
-     * `PATCH` request to execute on the server. See the individual overloads for
-     * details on the return type.
-     */
-    patch(url, body, options = {}) {
-        return this.request('PATCH', url, addBody(options, body));
-    }
-    /**
-     * Constructs an observable that, when subscribed, causes the configured
-     * `POST` request to execute on the server. The server responds with the location of
-     * the replaced resource. See the individual overloads for
-     * details on the return type.
-     */
-    post(url, body, options = {}) {
-        return this.request('POST', url, addBody(options, body));
-    }
-    /**
-     * Constructs an observable that, when subscribed, causes the configured
-     * `PUT` request to execute on the server. The `PUT` method replaces an existing resource
-     * with a new set of values.
-     * See the individual overloads for details on the return type.
-     */
-    put(url, body, options = {}) {
-        return this.request('PUT', url, addBody(options, body));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: HttpClient, deps: [{ token: HttpHandler }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: HttpClient });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: HttpClient, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: HttpHandler }] });
-
-const XSSI_PREFIX$1 = /^\)\]\}',?\n/;
-/**
- * Determine an appropriate URL for the response, by checking either
- * response url or the X-Request-URL header.
- */
-function getResponseUrl$1(response) {
-    if (response.url) {
-        return response.url;
-    }
-    // stored as lowercase in the map
-    const xRequestUrl = X_REQUEST_URL_HEADER.toLocaleLowerCase();
-    return response.headers.get(xRequestUrl);
-}
-/**
- * An internal injection token to reference `FetchBackend` implementation
- * in a tree-shakable way.
- */
-const FETCH_BACKEND = new InjectionToken(typeof ngDevMode === 'undefined' || ngDevMode ? 'FETCH_BACKEND' : '');
-/**
- * Uses `fetch` to send requests to a backend server.
- *
- * This `FetchBackend` requires the support of the
- * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) which is available on all
- * supported browsers and on Node.js v18 or later.
- *
- * @see {@link HttpHandler}
- *
- * @publicApi
- */
-class FetchBackend {
-    // We use an arrow function to always reference the current global implementation of `fetch`.
-    // This is helpful for cases when the global `fetch` implementation is modified by external code,
-    // see https://github.com/angular/angular/issues/57527.
-    fetchImpl = inject(FetchFactory, { optional: true })?.fetch ?? ((...args) => globalThis.fetch(...args));
-    ngZone = inject(NgZone);
-    destroyRef = inject(DestroyRef);
-    destroyed = false;
-    constructor() {
-        this.destroyRef.onDestroy(() => {
-            this.destroyed = true;
-        });
-    }
-    handle(request) {
-        return new Observable((observer) => {
-            const aborter = new AbortController();
-            this.doRequest(request, aborter.signal, observer).then(noop, (error) => observer.error(new HttpErrorResponse({ error })));
-            let timeoutId;
-            if (request.timeout) {
-                // TODO: Replace with AbortSignal.any([aborter.signal, AbortSignal.timeout(request.timeout)])
-                // when AbortSignal.any support is Baseline widely available (NET nov. 2026)
-                timeoutId = this.ngZone.runOutsideAngular(() => setTimeout(() => {
-                    if (!aborter.signal.aborted) {
-                        aborter.abort(new DOMException('signal timed out', 'TimeoutError'));
-                    }
-                }, request.timeout));
-            }
-            return () => {
-                if (timeoutId !== undefined) {
-                    clearTimeout(timeoutId);
-                }
-                aborter.abort();
-            };
-        });
-    }
-    async doRequest(request, signal, observer) {
-        const init = this.createRequestInit(request);
-        let response;
-        try {
-            // Run fetch outside of Angular zone.
-            // This is due to Node.js fetch implementation (Undici) which uses a number of setTimeouts to check if
-            // the response should eventually timeout which causes extra CD cycles every 500ms
-            const fetchPromise = this.ngZone.runOutsideAngular(() => this.fetchImpl(request.urlWithParams, { signal, ...init }));
-            // Make sure Zone.js doesn't trigger false-positive unhandled promise
-            // error in case the Promise is rejected synchronously. See function
-            // description for additional information.
-            silenceSuperfluousUnhandledPromiseRejection(fetchPromise);
-            // Send the `Sent` event before awaiting the response.
-            observer.next({ type: HttpEventType.Sent });
-            response = await fetchPromise;
-        }
-        catch (error) {
-            observer.error(new HttpErrorResponse({
-                error,
-                status: error.status ?? 0,
-                statusText: error.statusText,
-                url: request.urlWithParams,
-                headers: error.headers,
-            }));
-            return;
+        catch (error) {
+            observer.error(new HttpErrorResponse({
+                error,
+                status: error.status ?? 0,
+                statusText: error.statusText,
+                url: request.urlWithParams,
+                headers: error.headers,
+            }));
+            return;
         }
         const headers = new HttpHeaders(response.headers);
         const statusText = response.statusText;
@@ -1916,92 +1563,448 @@ class FetchBackend {
                     if (status < 200 || status >= 300) {
                         return text;
                     }
-                    throw e;
+                    throw e;
+                }
+            case 'text':
+                return new TextDecoder().decode(binContent);
+            case 'blob':
+                return new Blob([binContent], { type: contentType });
+            case 'arraybuffer':
+                return binContent.buffer;
+        }
+    }
+    createRequestInit(req) {
+        // We could share some of this logic with the XhrBackend
+        const headers = {};
+        let credentials;
+        // If the request has a credentials property, use it.
+        // Otherwise, if the request has withCredentials set to true, use 'include'.
+        credentials = req.credentials;
+        // If withCredentials is true should be set to 'include', for compatibility
+        if (req.withCredentials) {
+            // A warning is logged in development mode if the request has both
+            (typeof ngDevMode === 'undefined' || ngDevMode) && warningOptionsMessage(req);
+            credentials = 'include';
+        }
+        // Setting all the requested headers.
+        req.headers.forEach((name, values) => (headers[name] = values.join(',')));
+        // Add an Accept header if one isn't present already.
+        if (!req.headers.has(ACCEPT_HEADER)) {
+            headers[ACCEPT_HEADER] = ACCEPT_HEADER_VALUE;
+        }
+        // Auto-detect the Content-Type header if one isn't present already.
+        if (!req.headers.has(CONTENT_TYPE_HEADER)) {
+            const detectedType = req.detectContentTypeHeader();
+            // Sometimes Content-Type detection fails.
+            if (detectedType !== null) {
+                headers[CONTENT_TYPE_HEADER] = detectedType;
+            }
+        }
+        return {
+            body: req.serializeBody(),
+            method: req.method,
+            headers,
+            credentials,
+            keepalive: req.keepalive,
+            cache: req.cache,
+            priority: req.priority,
+            mode: req.mode,
+            redirect: req.redirect,
+            referrer: req.referrer,
+            integrity: req.integrity,
+        };
+    }
+    concatChunks(chunks, totalLength) {
+        const chunksAll = new Uint8Array(totalLength);
+        let position = 0;
+        for (const chunk of chunks) {
+            chunksAll.set(chunk, position);
+            position += chunk.length;
+        }
+        return chunksAll;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: FetchBackend, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: FetchBackend });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: FetchBackend, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+/**
+ * Abstract class to provide a mocked implementation of `fetch()`
+ */
+class FetchFactory {
+}
+function noop() { }
+function warningOptionsMessage(req) {
+    if (req.credentials && req.withCredentials) {
+        console.warn(_formatRuntimeError(2819 /* RuntimeErrorCode.WITH_CREDENTIALS_OVERRIDES_EXPLICIT_CREDENTIALS */, `Angular detected that a \`HttpClient\` request has both \`withCredentials: true\` and \`credentials: '${req.credentials}'\` options. The \`withCredentials\` option is overriding the explicit \`credentials\` setting to 'include'. Consider removing \`withCredentials\` and using \`credentials: '${req.credentials}'\` directly for clarity.`));
+    }
+}
+/**
+ * Zone.js treats a rejected promise that has not yet been awaited
+ * as an unhandled error. This function adds a noop `.then` to make
+ * sure that Zone.js doesn't throw an error if the Promise is rejected
+ * synchronously.
+ */
+function silenceSuperfluousUnhandledPromiseRejection(promise) {
+    promise.then(noop, noop);
+}
+
+const XSSI_PREFIX = /^\)\]\}',?\n/;
+const X_REQUEST_URL_REGEXP = RegExp(`^${X_REQUEST_URL_HEADER}:`, 'm');
+/**
+ * Determine an appropriate URL for the response, by checking either
+ * XMLHttpRequest.responseURL or the X-Request-URL header.
+ */
+function getResponseUrl(xhr) {
+    if ('responseURL' in xhr && xhr.responseURL) {
+        return xhr.responseURL;
+    }
+    if (X_REQUEST_URL_REGEXP.test(xhr.getAllResponseHeaders())) {
+        return xhr.getResponseHeader(X_REQUEST_URL_HEADER);
+    }
+    return null;
+}
+/**
+ * Validates whether the request is compatible with the XHR backend.
+ * Show a warning if the request contains options that are not supported by XHR.
+ */
+function validateXhrCompatibility(req) {
+    const unsupportedOptions = [
+        {
+            property: 'keepalive',
+            errorCode: 2813 /* RuntimeErrorCode.KEEPALIVE_NOT_SUPPORTED_WITH_XHR */,
+        },
+        {
+            property: 'cache',
+            errorCode: 2814 /* RuntimeErrorCode.CACHE_NOT_SUPPORTED_WITH_XHR */,
+        },
+        {
+            property: 'priority',
+            errorCode: 2815 /* RuntimeErrorCode.PRIORITY_NOT_SUPPORTED_WITH_XHR */,
+        },
+        {
+            property: 'mode',
+            errorCode: 2816 /* RuntimeErrorCode.MODE_NOT_SUPPORTED_WITH_XHR */,
+        },
+        {
+            property: 'redirect',
+            errorCode: 2817 /* RuntimeErrorCode.REDIRECT_NOT_SUPPORTED_WITH_XHR */,
+        },
+        {
+            property: 'credentials',
+            errorCode: 2818 /* RuntimeErrorCode.CREDENTIALS_NOT_SUPPORTED_WITH_XHR */,
+        },
+        {
+            property: 'integrity',
+            errorCode: 2820 /* RuntimeErrorCode.INTEGRITY_NOT_SUPPORTED_WITH_XHR */,
+        },
+        {
+            property: 'referrer',
+            errorCode: 2821 /* RuntimeErrorCode.REFERRER_NOT_SUPPORTED_WITH_XHR */,
+        },
+    ];
+    // Check each unsupported option and warn if present
+    for (const { property, errorCode } of unsupportedOptions) {
+        if (req[property]) {
+            console.warn(_formatRuntimeError(errorCode, `Angular detected that a \`HttpClient\` request with the \`${property}\` option was sent using XHR, which does not support it. To use the \`${property}\` option, enable Fetch API support by passing \`withFetch()\` as an argument to \`provideHttpClient()\`.`));
+        }
+    }
+}
+/**
+ * Uses `XMLHttpRequest` to send requests to a backend server.
+ * @see {@link HttpHandler}
+ * @see {@link JsonpClientBackend}
+ *
+ * @publicApi
+ */
+class HttpXhrBackend {
+    xhrFactory;
+    constructor(xhrFactory) {
+        this.xhrFactory = xhrFactory;
+    }
+    /**
+     * Processes a request and returns a stream of response events.
+     * @param req The request object.
+     * @returns An observable of the response events.
+     */
+    handle(req) {
+        // Quick check to give a better error message when a user attempts to use
+        // HttpClient.jsonp() without installing the HttpClientJsonpModule
+        if (req.method === 'JSONP') {
+            throw new _RuntimeError(-2800 /* RuntimeErrorCode.MISSING_JSONP_MODULE */, (typeof ngDevMode === 'undefined' || ngDevMode) &&
+                `Cannot make a JSONP request without JSONP support. To fix the problem, either add the \`withJsonpSupport()\` call (if \`provideHttpClient()\` is used) or import the \`HttpClientJsonpModule\` in the root NgModule.`);
+        }
+        // Validate that the request is compatible with the XHR backend.
+        ngDevMode && validateXhrCompatibility(req);
+        // Check whether this factory has a special function to load an XHR implementation
+        // for various non-browser environments. We currently limit it to only `ServerXhr`
+        // class, which needs to load an XHR implementation.
+        const xhrFactory = this.xhrFactory;
+        const source = 
+        // Note that `ɵloadImpl` is never defined in client bundles and can be
+        // safely dropped whenever we're running in the browser.
+        // This branching is redundant.
+        // The `ngServerMode` guard also enables tree-shaking of the `from()`
+        // function from the common bundle, as it's only used in server code.
+        typeof ngServerMode !== 'undefined' && ngServerMode && xhrFactory.ɵloadImpl
+            ? from(xhrFactory.ɵloadImpl())
+            : of(null);
+        return source.pipe(switchMap(() => {
+            // Everything happens on Observable subscription.
+            return new Observable((observer) => {
+                // Start by setting up the XHR object with request method, URL, and withCredentials
+                // flag.
+                const xhr = xhrFactory.build();
+                xhr.open(req.method, req.urlWithParams);
+                if (req.withCredentials) {
+                    xhr.withCredentials = true;
+                }
+                // Add all the requested headers.
+                req.headers.forEach((name, values) => xhr.setRequestHeader(name, values.join(',')));
+                // Add an Accept header if one isn't present already.
+                if (!req.headers.has(ACCEPT_HEADER)) {
+                    xhr.setRequestHeader(ACCEPT_HEADER, ACCEPT_HEADER_VALUE);
+                }
+                // Auto-detect the Content-Type header if one isn't present already.
+                if (!req.headers.has(CONTENT_TYPE_HEADER)) {
+                    const detectedType = req.detectContentTypeHeader();
+                    // Sometimes Content-Type detection fails.
+                    if (detectedType !== null) {
+                        xhr.setRequestHeader(CONTENT_TYPE_HEADER, detectedType);
+                    }
+                }
+                if (req.timeout) {
+                    xhr.timeout = req.timeout;
+                }
+                // Set the responseType if one was requested.
+                if (req.responseType) {
+                    const responseType = req.responseType.toLowerCase();
+                    // JSON responses need to be processed as text. This is because if the server
+                    // returns an XSSI-prefixed JSON response, the browser will fail to parse it,
+                    // xhr.response will be null, and xhr.responseText cannot be accessed to
+                    // retrieve the prefixed JSON data in order to strip the prefix. Thus, all JSON
+                    // is parsed by first requesting text and then applying JSON.parse.
+                    xhr.responseType = (responseType !== 'json' ? responseType : 'text');
+                }
+                // Serialize the request body if one is present. If not, this will be set to null.
+                const reqBody = req.serializeBody();
+                // If progress events are enabled, response headers will be delivered
+                // in two events - the HttpHeaderResponse event and the full HttpResponse
+                // event. However, since response headers don't change in between these
+                // two events, it doesn't make sense to parse them twice. So headerResponse
+                // caches the data extracted from the response whenever it's first parsed,
+                // to ensure parsing isn't duplicated.
+                let headerResponse = null;
+                // partialFromXhr extracts the HttpHeaderResponse from the current XMLHttpRequest
+                // state, and memoizes it into headerResponse.
+                const partialFromXhr = () => {
+                    if (headerResponse !== null) {
+                        return headerResponse;
+                    }
+                    const statusText = xhr.statusText || 'OK';
+                    // Parse headers from XMLHttpRequest - this step is lazy.
+                    const headers = new HttpHeaders(xhr.getAllResponseHeaders());
+                    // Read the response URL from the XMLHttpResponse instance and fall back on the
+                    // request URL.
+                    const url = getResponseUrl(xhr) || req.url;
+                    // Construct the HttpHeaderResponse and memoize it.
+                    headerResponse = new HttpHeaderResponse({ headers, status: xhr.status, statusText, url });
+                    return headerResponse;
+                };
+                // Next, a few closures are defined for the various events which XMLHttpRequest can
+                // emit. This allows them to be unregistered as event listeners later.
+                // First up is the load event, which represents a response being fully available.
+                const onLoad = () => {
+                    // Read response state from the memoized partial data.
+                    let { headers, status, statusText, url } = partialFromXhr();
+                    // The body will be read out if present.
+                    let body = null;
+                    if (status !== HTTP_STATUS_CODE_NO_CONTENT) {
+                        // Use XMLHttpRequest.response if set, responseText otherwise.
+                        body = typeof xhr.response === 'undefined' ? xhr.responseText : xhr.response;
+                    }
+                    // Normalize another potential bug (this one comes from CORS).
+                    if (status === 0) {
+                        status = !!body ? HTTP_STATUS_CODE_OK : 0;
+                    }
+                    // ok determines whether the response will be transmitted on the event or
+                    // error channel. Unsuccessful status codes (not 2xx) will always be errors,
+                    // but a successful status code can still result in an error if the user
+                    // asked for JSON data and the body cannot be parsed as such.
+                    let ok = status >= 200 && status < 300;
+                    // Check whether the body needs to be parsed as JSON (in many cases the browser
+                    // will have done that already).
+                    if (req.responseType === 'json' && typeof body === 'string') {
+                        // Save the original body, before attempting XSSI prefix stripping.
+                        const originalBody = body;
+                        body = body.replace(XSSI_PREFIX, '');
+                        try {
+                            // Attempt the parse. If it fails, a parse error should be delivered to the
+                            // user.
+                            body = body !== '' ? JSON.parse(body) : null;
+                        }
+                        catch (error) {
+                            // Since the JSON.parse failed, it's reasonable to assume this might not have
+                            // been a JSON response. Restore the original body (including any XSSI prefix)
+                            // to deliver a better error response.
+                            body = originalBody;
+                            // If this was an error request to begin with, leave it as a string, it
+                            // probably just isn't JSON. Otherwise, deliver the parsing error to the user.
+                            if (ok) {
+                                // Even though the response status was 2xx, this is still an error.
+                                ok = false;
+                                // The parse error contains the text of the body that failed to parse.
+                                body = { error, text: body };
+                            }
+                        }
+                    }
+                    if (ok) {
+                        // A successful response is delivered on the event stream.
+                        observer.next(new HttpResponse({
+                            body,
+                            headers,
+                            status,
+                            statusText,
+                            url: url || undefined,
+                        }));
+                        // The full body has been received and delivered, no further events
+                        // are possible. This request is complete.
+                        observer.complete();
+                    }
+                    else {
+                        // An unsuccessful request is delivered on the error channel.
+                        observer.error(new HttpErrorResponse({
+                            // The error in this case is the response body (error from the server).
+                            error: body,
+                            headers,
+                            status,
+                            statusText,
+                            url: url || undefined,
+                        }));
+                    }
+                };
+                // The onError callback is called when something goes wrong at the network level.
+                // Connection timeout, DNS error, offline, etc. These are actual errors, and are
+                // transmitted on the error channel.
+                const onError = (error) => {
+                    const { url } = partialFromXhr();
+                    const res = new HttpErrorResponse({
+                        error,
+                        status: xhr.status || 0,
+                        statusText: xhr.statusText || 'Unknown Error',
+                        url: url || undefined,
+                    });
+                    observer.error(res);
+                };
+                let onTimeout = onError;
+                if (req.timeout) {
+                    onTimeout = (_) => {
+                        const { url } = partialFromXhr();
+                        const res = new HttpErrorResponse({
+                            error: new DOMException('Request timed out', 'TimeoutError'),
+                            status: xhr.status || 0,
+                            statusText: xhr.statusText || 'Request timeout',
+                            url: url || undefined,
+                        });
+                        observer.error(res);
+                    };
+                }
+                // The sentHeaders flag tracks whether the HttpResponseHeaders event
+                // has been sent on the stream. This is necessary to track if progress
+                // is enabled since the event will be sent on only the first download
+                // progress event.
+                let sentHeaders = false;
+                // The download progress event handler, which is only registered if
+                // progress events are enabled.
+                const onDownProgress = (event) => {
+                    // Send the HttpResponseHeaders event if it hasn't been sent already.
+                    if (!sentHeaders) {
+                        observer.next(partialFromXhr());
+                        sentHeaders = true;
+                    }
+                    // Start building the download progress event to deliver on the response
+                    // event stream.
+                    let progressEvent = {
+                        type: HttpEventType.DownloadProgress,
+                        loaded: event.loaded,
+                    };
+                    // Set the total number of bytes in the event if it's available.
+                    if (event.lengthComputable) {
+                        progressEvent.total = event.total;
+                    }
+                    // If the request was for text content and a partial response is
+                    // available on XMLHttpRequest, include it in the progress event
+                    // to allow for streaming reads.
+                    if (req.responseType === 'text' && !!xhr.responseText) {
+                        progressEvent.partialText = xhr.responseText;
+                    }
+                    // Finally, fire the event.
+                    observer.next(progressEvent);
+                };
+                // The upload progress event handler, which is only registered if
+                // progress events are enabled.
+                const onUpProgress = (event) => {
+                    // Upload progress events are simpler. Begin building the progress
+                    // event.
+                    let progress = {
+                        type: HttpEventType.UploadProgress,
+                        loaded: event.loaded,
+                    };
+                    // If the total number of bytes being uploaded is available, include
+                    // it.
+                    if (event.lengthComputable) {
+                        progress.total = event.total;
+                    }
+                    // Send the event.
+                    observer.next(progress);
+                };
+                // By default, register for load and error events.
+                xhr.addEventListener('load', onLoad);
+                xhr.addEventListener('error', onError);
+                xhr.addEventListener('timeout', onTimeout);
+                xhr.addEventListener('abort', onError);
+                // Progress events are only enabled if requested.
+                if (req.reportProgress) {
+                    // Download progress is always enabled if requested.
+                    xhr.addEventListener('progress', onDownProgress);
+                    // Upload progress depends on whether there is a body to upload.
+                    if (reqBody !== null && xhr.upload) {
+                        xhr.upload.addEventListener('progress', onUpProgress);
+                    }
                 }
-            case 'text':
-                return new TextDecoder().decode(binContent);
-            case 'blob':
-                return new Blob([binContent], { type: contentType });
-            case 'arraybuffer':
-                return binContent.buffer;
-        }
-    }
-    createRequestInit(req) {
-        // We could share some of this logic with the XhrBackend
-        const headers = {};
-        let credentials;
-        // If the request has a credentials property, use it.
-        // Otherwise, if the request has withCredentials set to true, use 'include'.
-        credentials = req.credentials;
-        // If withCredentials is true should be set to 'include', for compatibility
-        if (req.withCredentials) {
-            // A warning is logged in development mode if the request has both
-            (typeof ngDevMode === 'undefined' || ngDevMode) && warningOptionsMessage(req);
-            credentials = 'include';
-        }
-        // Setting all the requested headers.
-        req.headers.forEach((name, values) => (headers[name] = values.join(',')));
-        // Add an Accept header if one isn't present already.
-        if (!req.headers.has(ACCEPT_HEADER)) {
-            headers[ACCEPT_HEADER] = ACCEPT_HEADER_VALUE;
-        }
-        // Auto-detect the Content-Type header if one isn't present already.
-        if (!req.headers.has(CONTENT_TYPE_HEADER)) {
-            const detectedType = req.detectContentTypeHeader();
-            // Sometimes Content-Type detection fails.
-            if (detectedType !== null) {
-                headers[CONTENT_TYPE_HEADER] = detectedType;
-            }
-        }
-        return {
-            body: req.serializeBody(),
-            method: req.method,
-            headers,
-            credentials,
-            keepalive: req.keepalive,
-            cache: req.cache,
-            priority: req.priority,
-            mode: req.mode,
-            redirect: req.redirect,
-            referrer: req.referrer,
-            integrity: req.integrity,
-        };
-    }
-    concatChunks(chunks, totalLength) {
-        const chunksAll = new Uint8Array(totalLength);
-        let position = 0;
-        for (const chunk of chunks) {
-            chunksAll.set(chunk, position);
-            position += chunk.length;
-        }
-        return chunksAll;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: FetchBackend, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: FetchBackend });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: FetchBackend, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-/**
- * Abstract class to provide a mocked implementation of `fetch()`
- */
-class FetchFactory {
-}
-function noop() { }
-function warningOptionsMessage(req) {
-    if (req.credentials && req.withCredentials) {
-        console.warn(_formatRuntimeError(2819 /* RuntimeErrorCode.WITH_CREDENTIALS_OVERRIDES_EXPLICIT_CREDENTIALS */, `Angular detected that a \`HttpClient\` request has both \`withCredentials: true\` and \`credentials: '${req.credentials}'\` options. The \`withCredentials\` option is overriding the explicit \`credentials\` setting to 'include'. Consider removing \`withCredentials\` and using \`credentials: '${req.credentials}'\` directly for clarity.`));
+                // Fire the request, and notify the event stream that it was fired.
+                xhr.send(reqBody);
+                observer.next({ type: HttpEventType.Sent });
+                // This is the return from the Observable function, which is the
+                // request cancellation handler.
+                return () => {
+                    // On a cancellation, remove all registered event listeners.
+                    xhr.removeEventListener('error', onError);
+                    xhr.removeEventListener('abort', onError);
+                    xhr.removeEventListener('load', onLoad);
+                    xhr.removeEventListener('timeout', onTimeout);
+                    if (req.reportProgress) {
+                        xhr.removeEventListener('progress', onDownProgress);
+                        if (reqBody !== null && xhr.upload) {
+                            xhr.upload.removeEventListener('progress', onUpProgress);
+                        }
+                    }
+                    // Finally, abort the in-flight request.
+                    if (xhr.readyState !== xhr.DONE) {
+                        xhr.abort();
+                    }
+                };
+            });
+        }));
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: HttpXhrBackend, deps: [{ token: XhrFactory }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: HttpXhrBackend, providedIn: 'root' });
 }
-/**
- * Zone.js treats a rejected promise that has not yet been awaited
- * as an unhandled error. This function adds a noop `.then` to make
- * sure that Zone.js doesn't throw an error if the Promise is rejected
- * synchronously.
- */
-function silenceSuperfluousUnhandledPromiseRejection(promise) {
-    promise.then(noop, noop);
-}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: HttpXhrBackend, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: XhrFactory }] });
 
 function interceptorChainEndFn(req, finalHandlerFn) {
     return finalHandlerFn(req);
@@ -2032,7 +2035,7 @@ const HTTP_INTERCEPTORS = new InjectionToken(ngDevMode ? 'HTTP_INTERCEPTORS' : '
 /**
  * A multi-provided token of `HttpInterceptorFn`s.
  */
-const HTTP_INTERCEPTOR_FNS = new InjectionToken(ngDevMode ? 'HTTP_INTERCEPTOR_FNS' : '');
+const HTTP_INTERCEPTOR_FNS = new InjectionToken(ngDevMode ? 'HTTP_INTERCEPTOR_FNS' : '', { factory: () => [] });
 /**
  * A multi-provided token of `HttpInterceptorFn`s that are only set in root.
  */
@@ -2067,15 +2070,33 @@ function legacyInterceptorFnFactory() {
         }
     };
 }
+
+/**
+ * A final `HttpHandler` which will dispatch the request via browser HTTP APIs to a backend.
+ *
+ * Interceptors sit between the `HttpClient` interface and the `HttpBackend`.
+ *
+ * When injected, `HttpBackend` dispatches requests directly to the backend, without going
+ * through the interceptor chain.
+ *
+ * @publicApi
+ */
+class HttpBackend {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: HttpBackend, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: HttpBackend, providedIn: 'root', useExisting: HttpXhrBackend });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: HttpBackend, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root', useExisting: HttpXhrBackend }]
+        }] });
 let fetchBackendWarningDisplayed = false;
-class HttpInterceptorHandler extends HttpHandler {
+class HttpInterceptorHandler {
     backend;
     injector;
     chain = null;
     pendingTasks = inject(PendingTasks);
     contributeToStability = inject(REQUESTS_CONTRIBUTE_TO_STABILITY);
     constructor(backend, injector) {
-        super();
         this.backend = backend;
         this.injector = injector;
         // We strongly recommend using fetch backend for HTTP calls when SSR is used
@@ -2124,615 +2145,610 @@ class HttpInterceptorHandler extends HttpHandler {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: HttpInterceptorHandler, deps: [{ token: HttpBackend }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: HttpInterceptorHandler });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: HttpInterceptorHandler, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: HttpInterceptorHandler, decorators: [{
-            type: Injectable
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: HttpBackend }, { type: i0.EnvironmentInjector }] });
+/**
+ * Transforms an `HttpRequest` into a stream of `HttpEvent`s, one of which will likely be a
+ * `HttpResponse`.
+ *
+ * `HttpHandler` is injectable. When injected, the handler instance dispatches requests to the
+ * first interceptor in the chain, which dispatches to the second, etc, eventually reaching the
+ * `HttpBackend`.
+ *
+ * In an `HttpInterceptor`, the `HttpHandler` parameter is the next interceptor in the chain.
+ *
+ * @publicApi
+ */
+class HttpHandler {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: HttpHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: HttpHandler, providedIn: 'root', useExisting: HttpInterceptorHandler });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: HttpHandler, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root', useExisting: HttpInterceptorHandler }]
+        }] });
 
-// Every request made through JSONP needs a callback name that's unique across the
-// whole page. Each request is assigned an id and the callback name is constructed
-// from that. The next id to be assigned is tracked in a global variable here that
-// is shared among all applications on the page.
-let nextRequestId = 0;
 /**
- * When a pending <script> is unsubscribed we'll move it to this document, so it won't be
- * executed.
+ * Constructs an instance of `HttpRequestOptions<T>` from a source `HttpMethodOptions` and
+ * the given `body`. This function clones the object and adds the body.
+ *
+ * Note that the `responseType` *options* value is a String that identifies the
+ * single data type of the response.
+ * A single overload version of the method handles each response type.
+ * The value of `responseType` cannot be a union, as the combined signature could imply.
+ *
  */
-let foreignDocument;
-// Error text given when a JSONP script is injected, but doesn't invoke the callback
-// passed in its URL.
-const JSONP_ERR_NO_CALLBACK = 'JSONP injected script did not invoke callback.';
-// Error text given when a request is passed to the JsonpClientBackend that doesn't
-// have a request method JSONP.
-const JSONP_ERR_WRONG_METHOD = 'JSONP requests must use JSONP request method.';
-const JSONP_ERR_WRONG_RESPONSE_TYPE = 'JSONP requests must use Json response type.';
-// Error text given when a request is passed to the JsonpClientBackend that has
-// headers set
-const JSONP_ERR_HEADERS_NOT_SUPPORTED = 'JSONP requests do not support headers.';
+function addBody(options, body) {
+    return {
+        body,
+        headers: options.headers,
+        context: options.context,
+        observe: options.observe,
+        params: options.params,
+        reportProgress: options.reportProgress,
+        responseType: options.responseType,
+        withCredentials: options.withCredentials,
+        credentials: options.credentials,
+        transferCache: options.transferCache,
+        timeout: options.timeout,
+        keepalive: options.keepalive,
+        priority: options.priority,
+        cache: options.cache,
+        mode: options.mode,
+        redirect: options.redirect,
+        integrity: options.integrity,
+        referrer: options.referrer,
+    };
+}
 /**
- * DI token/abstract type representing a map of JSONP callbacks.
+ * Performs HTTP requests.
+ * This service is available as an injectable class, with methods to perform HTTP requests.
+ * Each request method has multiple signatures, and the return type varies based on
+ * the signature that is called (mainly the values of `observe` and `responseType`).
+ *
+ * Note that the `responseType` *options* value is a String that identifies the
+ * single data type of the response.
+ * A single overload version of the method handles each response type.
+ * The value of `responseType` cannot be a union, as the combined signature could imply.
+ *
+ * @usageNotes
  *
- * In the browser, this should always be the `window` object.
+ * ### HTTP Request Example
  *
+ * ```ts
+ *  // GET heroes whose name contains search term
+ * searchHeroes(term: string): observable<Hero[]>{
  *
- */
-class JsonpCallbackContext {
-}
-/**
- * Factory function that determines where to store JSONP callbacks.
+ *  const params = new HttpParams({fromString: 'name=term'});
+ *    return this.httpClient.request('GET', this.heroesUrl, {responseType:'json', params});
+ * }
+ * ```
  *
- * Ordinarily JSONP callbacks are stored on the `window` object, but this may not exist
- * in test environments. In that case, callbacks are stored on an anonymous object instead.
+ * Alternatively, the parameter string can be used without invoking HttpParams
+ * by directly joining to the URL.
+ * ```ts
+ * this.httpClient.request('GET', this.heroesUrl + '?' + 'name=term', {responseType:'json'});
+ * ```
  *
  *
- */
-function jsonpCallbackContext() {
-    if (typeof window === 'object') {
-        return window;
-    }
-    return {};
-}
-/**
- * Processes an `HttpRequest` with the JSONP method,
- * by performing JSONP style requests.
- * @see {@link HttpHandler}
- * @see {@link HttpXhrBackend}
+ * ### JSONP Example
+ * ```ts
+ * requestJsonp(url, callback = 'callback') {
+ *  return this.httpClient.jsonp(this.heroesURL, callback);
+ * }
+ * ```
+ *
+ * ### PATCH Example
+ * ```ts
+ * // PATCH one of the heroes' name
+ * patchHero (id: number, heroName: string): Observable<{}> {
+ * const url = `${this.heroesUrl}/${id}`;   // PATCH api/heroes/42
+ *  return this.httpClient.patch(url, {name: heroName}, httpOptions)
+ *    .pipe(catchError(this.handleError('patchHero')));
+ * }
+ * ```
+ *
+ * @see [HTTP Guide](guide/http)
+ * @see [HTTP Request](api/common/http/HttpRequest)
  *
  * @publicApi
  */
-class JsonpClientBackend {
-    callbackMap;
-    document;
-    /**
-     * A resolved promise that can be used to schedule microtasks in the event handlers.
-     */
-    resolvedPromise = Promise.resolve();
-    constructor(callbackMap, document) {
-        this.callbackMap = callbackMap;
-        this.document = document;
-    }
-    /**
-     * Get the name of the next callback method, by incrementing the global `nextRequestId`.
-     */
-    nextCallback() {
-        return `ng_jsonp_callback_${nextRequestId++}`;
+class HttpClient {
+    handler;
+    constructor(handler) {
+        this.handler = handler;
     }
     /**
-     * Processes a JSONP request and returns an event stream of the results.
-     * @param req The request object.
-     * @returns An observable of the response events.
+     * Constructs an observable for a generic HTTP request that, when subscribed,
+     * fires the request through the chain of registered interceptors and on to the
+     * server.
+     *
+     * You can pass an `HttpRequest` directly as the only parameter. In this case,
+     * the call returns an observable of the raw `HttpEvent` stream.
+     *
+     * Alternatively you can pass an HTTP method as the first parameter,
+     * a URL string as the second, and an options hash containing the request body as the third.
+     * See `addBody()`. In this case, the specified `responseType` and `observe` options determine the
+     * type of returned observable.
+     *   * The `responseType` value determines how a successful response body is parsed.
+     *   * If `responseType` is the default `json`, you can pass a type interface for the resulting
+     * object as a type parameter to the call.
+     *
+     * The `observe` value determines the return type, according to what you are interested in
+     * observing.
+     *   * An `observe` value of events returns an observable of the raw `HttpEvent` stream, including
+     * progress events by default.
+     *   * An `observe` value of response returns an observable of `HttpResponse<T>`,
+     * where the `T` parameter depends on the `responseType` and any optionally provided type
+     * parameter.
+     *   * An `observe` value of body returns an observable of `<T>` with the same `T` body type.
      *
      */
-    handle(req) {
-        // Firstly, check both the method and response type. If either doesn't match
-        // then the request was improperly routed here and cannot be handled.
-        if (req.method !== 'JSONP') {
-            throw new _RuntimeError(2810 /* RuntimeErrorCode.JSONP_WRONG_METHOD */, ngDevMode && JSONP_ERR_WRONG_METHOD);
+    request(first, url, options = {}) {
+        let req;
+        // First, check whether the primary argument is an instance of `HttpRequest`.
+        if (first instanceof HttpRequest) {
+            // It is. The other arguments must be undefined (per the signatures) and can be
+            // ignored.
+            req = first;
         }
-        else if (req.responseType !== 'json') {
-            throw new _RuntimeError(2811 /* RuntimeErrorCode.JSONP_WRONG_RESPONSE_TYPE */, ngDevMode && JSONP_ERR_WRONG_RESPONSE_TYPE);
+        else {
+            // It's a string, so it represents a URL. Construct a request based on it,
+            // and incorporate the remaining arguments (assuming `GET` unless a method is
+            // provided.
+            // Figure out the headers.
+            let headers = undefined;
+            if (options.headers instanceof HttpHeaders) {
+                headers = options.headers;
+            }
+            else {
+                headers = new HttpHeaders(options.headers);
+            }
+            // Sort out parameters.
+            let params = undefined;
+            if (!!options.params) {
+                if (options.params instanceof HttpParams) {
+                    params = options.params;
+                }
+                else {
+                    params = new HttpParams({ fromObject: options.params });
+                }
+            }
+            // Construct the request.
+            req = new HttpRequest(first, url, options.body !== undefined ? options.body : null, {
+                headers,
+                context: options.context,
+                params,
+                reportProgress: options.reportProgress,
+                // By default, JSON is assumed to be returned for all calls.
+                responseType: options.responseType || 'json',
+                withCredentials: options.withCredentials,
+                transferCache: options.transferCache,
+                keepalive: options.keepalive,
+                priority: options.priority,
+                cache: options.cache,
+                mode: options.mode,
+                redirect: options.redirect,
+                credentials: options.credentials,
+                referrer: options.referrer,
+                integrity: options.integrity,
+                timeout: options.timeout,
+            });
         }
-        // Check the request headers. JSONP doesn't support headers and
-        // cannot set any that were supplied.
-        if (req.headers.keys().length > 0) {
-            throw new _RuntimeError(2812 /* RuntimeErrorCode.JSONP_HEADERS_NOT_SUPPORTED */, ngDevMode && JSONP_ERR_HEADERS_NOT_SUPPORTED);
+        // Start with an Observable.of() the initial request, and run the handler (which
+        // includes all interceptors) inside a concatMap(). This way, the handler runs
+        // inside an Observable chain, which causes interceptors to be re-run on every
+        // subscription (this also makes retries re-run the handler, including interceptors).
+        const events$ = of(req).pipe(concatMap((req) => this.handler.handle(req)));
+        // If coming via the API signature which accepts a previously constructed HttpRequest,
+        // the only option is to get the event stream. Otherwise, return the event stream if
+        // that is what was requested.
+        if (first instanceof HttpRequest || options.observe === 'events') {
+            return events$;
         }
-        // Everything else happens inside the Observable boundary.
-        return new Observable((observer) => {
-            // The first step to make a request is to generate the callback name, and replace the
-            // callback placeholder in the URL with the name. Care has to be taken here to ensure
-            // a trailing &, if matched, gets inserted back into the URL in the correct place.
-            const callback = this.nextCallback();
-            const url = req.urlWithParams.replace(/=JSONP_CALLBACK(&|$)/, `=${callback}$1`);
-            // Construct the <script> tag and point it at the URL.
-            const node = this.document.createElement('script');
-            node.src = url;
-            // A JSONP request requires waiting for multiple callbacks. These variables
-            // are closed over and track state across those callbacks.
-            // The response object, if one has been received, or null otherwise.
-            let body = null;
-            // Whether the response callback has been called.
-            let finished = false;
-            // Set the response callback in this.callbackMap (which will be the window
-            // object in the browser. The script being loaded via the <script> tag will
-            // eventually call this callback.
-            this.callbackMap[callback] = (data) => {
-                // Data has been received from the JSONP script. Firstly, delete this callback.
-                delete this.callbackMap[callback];
-                // Set state to indicate data was received.
-                body = data;
-                finished = true;
-            };
-            // cleanup() is a utility closure that removes the <script> from the page and
-            // the response callback from the window. This logic is used in both the
-            // success, error, and cancellation paths, so it's extracted out for convenience.
-            const cleanup = () => {
-                node.removeEventListener('load', onLoad);
-                node.removeEventListener('error', onError);
-                // Remove the <script> tag if it's still on the page.
-                node.remove();
-                // Remove the response callback from the callbackMap (window object in the
-                // browser).
-                delete this.callbackMap[callback];
-            };
-            // onLoad() is the success callback which runs after the response callback
-            // if the JSONP script loads successfully. The event itself is unimportant.
-            // If something went wrong, onLoad() may run without the response callback
-            // having been invoked.
-            const onLoad = () => {
-                // We wrap it in an extra Promise, to ensure the microtask
-                // is scheduled after the loaded endpoint has executed any potential microtask itself,
-                // which is not guaranteed in Internet Explorer and EdgeHTML. See issue #39496
-                this.resolvedPromise.then(() => {
-                    // Cleanup the page.
-                    cleanup();
-                    // Check whether the response callback has run.
-                    if (!finished) {
-                        // It hasn't, something went wrong with the request. Return an error via
-                        // the Observable error path. All JSONP errors have status 0.
-                        observer.error(new HttpErrorResponse({
-                            url,
-                            status: 0,
-                            statusText: 'JSONP Error',
-                            error: new Error(JSONP_ERR_NO_CALLBACK),
+        // The requested stream contains either the full response or the body. In either
+        // case, the first step is to filter the event stream to extract a stream of
+        // responses(s).
+        const res$ = (events$.pipe(filter((event) => event instanceof HttpResponse)));
+        // Decide which stream to return.
+        switch (options.observe || 'body') {
+            case 'body':
+                // The requested stream is the body. Map the response stream to the response
+                // body. This could be done more simply, but a misbehaving interceptor might
+                // transform the response body into a different format and ignore the requested
+                // responseType. Guard against this by validating that the response is of the
+                // requested type.
+                switch (req.responseType) {
+                    case 'arraybuffer':
+                        return res$.pipe(map((res) => {
+                            // Validate that the body is an ArrayBuffer.
+                            if (res.body !== null && !(res.body instanceof ArrayBuffer)) {
+                                throw new _RuntimeError(2806 /* RuntimeErrorCode.RESPONSE_IS_NOT_AN_ARRAY_BUFFER */, ngDevMode && 'Response is not an ArrayBuffer.');
+                            }
+                            return res.body;
+                        }));
+                    case 'blob':
+                        return res$.pipe(map((res) => {
+                            // Validate that the body is a Blob.
+                            if (res.body !== null && !(res.body instanceof Blob)) {
+                                throw new _RuntimeError(2807 /* RuntimeErrorCode.RESPONSE_IS_NOT_A_BLOB */, ngDevMode && 'Response is not a Blob.');
+                            }
+                            return res.body;
+                        }));
+                    case 'text':
+                        return res$.pipe(map((res) => {
+                            // Validate that the body is a string.
+                            if (res.body !== null && typeof res.body !== 'string') {
+                                throw new _RuntimeError(2808 /* RuntimeErrorCode.RESPONSE_IS_NOT_A_STRING */, ngDevMode && 'Response is not a string.');
+                            }
+                            return res.body;
                         }));
-                        return;
-                    }
-                    // Success. body either contains the response body or null if none was
-                    // returned.
-                    observer.next(new HttpResponse({
-                        body,
-                        status: HTTP_STATUS_CODE_OK,
-                        statusText: 'OK',
-                        url,
-                    }));
-                    // Complete the stream, the response is over.
-                    observer.complete();
-                });
-            };
-            // onError() is the error callback, which runs if the script returned generates
-            // a Javascript error. It emits the error via the Observable error channel as
-            // a HttpErrorResponse.
-            const onError = (error) => {
-                cleanup();
-                // Wrap the error in a HttpErrorResponse.
-                observer.error(new HttpErrorResponse({
-                    error,
-                    status: 0,
-                    statusText: 'JSONP Error',
-                    url,
-                }));
-            };
-            // Subscribe to both the success (load) and error events on the <script> tag,
-            // and add it to the page.
-            node.addEventListener('load', onLoad);
-            node.addEventListener('error', onError);
-            this.document.body.appendChild(node);
-            // The request has now been successfully sent.
-            observer.next({ type: HttpEventType.Sent });
-            // Cancellation handler.
-            return () => {
-                if (!finished) {
-                    this.removeListeners(node);
+                    case 'json':
+                    default:
+                        // No validation needed for JSON responses, as they can be of any type.
+                        return res$.pipe(map((res) => res.body));
                 }
-                // And finally, clean up the page.
-                cleanup();
-            };
-        });
+            case 'response':
+                // The response stream was requested directly, so return it.
+                return res$;
+            default:
+                // Guard against new future observe types being added.
+                throw new _RuntimeError(2809 /* RuntimeErrorCode.UNHANDLED_OBSERVE_TYPE */, ngDevMode && `Unreachable: unhandled observe type ${options.observe}}`);
+        }
     }
-    removeListeners(script) {
-        // Issue #34818
-        // Changing <script>'s ownerDocument will prevent it from execution.
-        // https://html.spec.whatwg.org/multipage/scripting.html#execute-the-script-block
-        foreignDocument ??= this.document.implementation.createHTMLDocument();
-        foreignDocument.adoptNode(script);
+    /**
+     * Constructs an observable that, when subscribed, causes the configured
+     * `DELETE` request to execute on the server. See the individual overloads for
+     * details on the return type.
+     *
+     * @param url     The endpoint URL.
+     * @param options The HTTP options to send with the request.
+     *
+     */
+    delete(url, options = {}) {
+        return this.request('DELETE', url, options);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: JsonpClientBackend, deps: [{ token: JsonpCallbackContext }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: JsonpClientBackend });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: JsonpClientBackend, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: JsonpCallbackContext }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }] });
-/**
- * Identifies requests with the method JSONP and shifts them to the `JsonpClientBackend`.
- */
-function jsonpInterceptorFn(req, next) {
-    if (req.method === 'JSONP') {
-        return inject(JsonpClientBackend).handle(req);
+    /**
+     * Constructs an observable that, when subscribed, causes the configured
+     * `GET` request to execute on the server. See the individual overloads for
+     * details on the return type.
+     */
+    get(url, options = {}) {
+        return this.request('GET', url, options);
     }
-    // Fall through for normal HTTP requests.
-    return next(req);
-}
-/**
- * Identifies requests with the method JSONP and
- * shifts them to the `JsonpClientBackend`.
- *
- * @see {@link HttpInterceptor}
- *
- * @publicApi
- */
-class JsonpInterceptor {
-    injector;
-    constructor(injector) {
-        this.injector = injector;
+    /**
+     * Constructs an observable that, when subscribed, causes the configured
+     * `HEAD` request to execute on the server. The `HEAD` method returns
+     * meta information about the resource without transferring the
+     * resource itself. See the individual overloads for
+     * details on the return type.
+     */
+    head(url, options = {}) {
+        return this.request('HEAD', url, options);
     }
     /**
-     * Identifies and handles a given JSONP request.
-     * @param initialRequest The outgoing request object to handle.
-     * @param next The next interceptor in the chain, or the backend
-     * if no interceptors remain in the chain.
-     * @returns An observable of the event stream.
+     * Constructs an `Observable` that, when subscribed, causes a request with the special method
+     * `JSONP` to be dispatched via the interceptor pipeline.
+     * The [JSONP pattern](https://en.wikipedia.org/wiki/JSONP) works around limitations of certain
+     * API endpoints that don't support newer,
+     * and preferable [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) protocol.
+     * JSONP treats the endpoint API as a JavaScript file and tricks the browser to process the
+     * requests even if the API endpoint is not located on the same domain (origin) as the client-side
+     * application making the request.
+     * The endpoint API must support JSONP callback for JSONP requests to work.
+     * The resource API returns the JSON response wrapped in a callback function.
+     * You can pass the callback function name as one of the query parameters.
+     * Note that JSONP requests can only be used with `GET` requests.
+     *
+     * @param url The resource URL.
+     * @param callbackParam The callback function name.
+     *
      */
-    intercept(initialRequest, next) {
-        return runInInjectionContext(this.injector, () => jsonpInterceptorFn(initialRequest, (downstreamRequest) => next.handle(downstreamRequest)));
+    jsonp(url, callbackParam) {
+        return this.request('JSONP', url, {
+            params: new HttpParams().append(callbackParam, 'JSONP_CALLBACK'),
+            observe: 'body',
+            responseType: 'json',
+        });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: JsonpInterceptor, deps: [{ token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: JsonpInterceptor });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: JsonpInterceptor, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: i0.EnvironmentInjector }] });
-
-const XSSI_PREFIX = /^\)\]\}',?\n/;
-const X_REQUEST_URL_REGEXP = RegExp(`^${X_REQUEST_URL_HEADER}:`, 'm');
-/**
- * Determine an appropriate URL for the response, by checking either
- * XMLHttpRequest.responseURL or the X-Request-URL header.
- */
-function getResponseUrl(xhr) {
-    if ('responseURL' in xhr && xhr.responseURL) {
-        return xhr.responseURL;
+    /**
+     * Constructs an `Observable` that, when subscribed, causes the configured
+     * `OPTIONS` request to execute on the server. This method allows the client
+     * to determine the supported HTTP methods and other capabilities of an endpoint,
+     * without implying a resource action. See the individual overloads for
+     * details on the return type.
+     */
+    options(url, options = {}) {
+        return this.request('OPTIONS', url, options);
     }
-    if (X_REQUEST_URL_REGEXP.test(xhr.getAllResponseHeaders())) {
-        return xhr.getResponseHeader(X_REQUEST_URL_HEADER);
+    /**
+     * Constructs an observable that, when subscribed, causes the configured
+     * `PATCH` request to execute on the server. See the individual overloads for
+     * details on the return type.
+     */
+    patch(url, body, options = {}) {
+        return this.request('PATCH', url, addBody(options, body));
     }
-    return null;
+    /**
+     * Constructs an observable that, when subscribed, causes the configured
+     * `POST` request to execute on the server. The server responds with the location of
+     * the replaced resource. See the individual overloads for
+     * details on the return type.
+     */
+    post(url, body, options = {}) {
+        return this.request('POST', url, addBody(options, body));
+    }
+    /**
+     * Constructs an observable that, when subscribed, causes the configured
+     * `PUT` request to execute on the server. The `PUT` method replaces an existing resource
+     * with a new set of values.
+     * See the individual overloads for details on the return type.
+     */
+    put(url, body, options = {}) {
+        return this.request('PUT', url, addBody(options, body));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: HttpClient, deps: [{ token: HttpHandler }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: HttpClient, providedIn: 'root' });
 }
-/**
- * Validates whether the request is compatible with the XHR backend.
- * Show a warning if the request contains options that are not supported by XHR.
- */
-function validateXhrCompatibility(req) {
-    const unsupportedOptions = [
-        {
-            property: 'keepalive',
-            errorCode: 2813 /* RuntimeErrorCode.KEEPALIVE_NOT_SUPPORTED_WITH_XHR */,
-        },
-        {
-            property: 'cache',
-            errorCode: 2814 /* RuntimeErrorCode.CACHE_NOT_SUPPORTED_WITH_XHR */,
-        },
-        {
-            property: 'priority',
-            errorCode: 2815 /* RuntimeErrorCode.PRIORITY_NOT_SUPPORTED_WITH_XHR */,
-        },
-        {
-            property: 'mode',
-            errorCode: 2816 /* RuntimeErrorCode.MODE_NOT_SUPPORTED_WITH_XHR */,
-        },
-        {
-            property: 'redirect',
-            errorCode: 2817 /* RuntimeErrorCode.REDIRECT_NOT_SUPPORTED_WITH_XHR */,
-        },
-        {
-            property: 'credentials',
-            errorCode: 2818 /* RuntimeErrorCode.CREDENTIALS_NOT_SUPPORTED_WITH_XHR */,
-        },
-        {
-            property: 'integrity',
-            errorCode: 2820 /* RuntimeErrorCode.INTEGRITY_NOT_SUPPORTED_WITH_XHR */,
-        },
-        {
-            property: 'referrer',
-            errorCode: 2821 /* RuntimeErrorCode.REFERRER_NOT_SUPPORTED_WITH_XHR */,
-        },
-    ];
-    // Check each unsupported option and warn if present
-    for (const { property, errorCode } of unsupportedOptions) {
-        if (req[property]) {
-            console.warn(_formatRuntimeError(errorCode, `Angular detected that a \`HttpClient\` request with the \`${property}\` option was sent using XHR, which does not support it. To use the \`${property}\` option, enable Fetch API support by passing \`withFetch()\` as an argument to \`provideHttpClient()\`.`));
-        }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: HttpClient, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: HttpHandler }] });
+
+// Every request made through JSONP needs a callback name that's unique across the
+// whole page. Each request is assigned an id and the callback name is constructed
+// from that. The next id to be assigned is tracked in a global variable here that
+// is shared among all applications on the page.
+let nextRequestId = 0;
+/**
+ * When a pending <script> is unsubscribed we'll move it to this document, so it won't be
+ * executed.
+ */
+let foreignDocument;
+// Error text given when a JSONP script is injected, but doesn't invoke the callback
+// passed in its URL.
+const JSONP_ERR_NO_CALLBACK = 'JSONP injected script did not invoke callback.';
+// Error text given when a request is passed to the JsonpClientBackend that doesn't
+// have a request method JSONP.
+const JSONP_ERR_WRONG_METHOD = 'JSONP requests must use JSONP request method.';
+const JSONP_ERR_WRONG_RESPONSE_TYPE = 'JSONP requests must use Json response type.';
+// Error text given when a request is passed to the JsonpClientBackend that has
+// headers set
+const JSONP_ERR_HEADERS_NOT_SUPPORTED = 'JSONP requests do not support headers.';
+/**
+ * DI token/abstract type representing a map of JSONP callbacks.
+ *
+ * In the browser, this should always be the `window` object.
+ *
+ *
+ */
+class JsonpCallbackContext {
+}
+/**
+ * Factory function that determines where to store JSONP callbacks.
+ *
+ * Ordinarily JSONP callbacks are stored on the `window` object, but this may not exist
+ * in test environments. In that case, callbacks are stored on an anonymous object instead.
+ *
+ *
+ */
+function jsonpCallbackContext() {
+    if (typeof window === 'object') {
+        return window;
     }
+    return {};
 }
 /**
- * Uses `XMLHttpRequest` to send requests to a backend server.
+ * Processes an `HttpRequest` with the JSONP method,
+ * by performing JSONP style requests.
  * @see {@link HttpHandler}
- * @see {@link JsonpClientBackend}
+ * @see {@link HttpXhrBackend}
  *
  * @publicApi
  */
-class HttpXhrBackend {
-    xhrFactory;
-    constructor(xhrFactory) {
-        this.xhrFactory = xhrFactory;
+class JsonpClientBackend {
+    callbackMap;
+    document;
+    /**
+     * A resolved promise that can be used to schedule microtasks in the event handlers.
+     */
+    resolvedPromise = Promise.resolve();
+    constructor(callbackMap, document) {
+        this.callbackMap = callbackMap;
+        this.document = document;
     }
     /**
-     * Processes a request and returns a stream of response events.
+     * Get the name of the next callback method, by incrementing the global `nextRequestId`.
+     */
+    nextCallback() {
+        return `ng_jsonp_callback_${nextRequestId++}`;
+    }
+    /**
+     * Processes a JSONP request and returns an event stream of the results.
      * @param req The request object.
      * @returns An observable of the response events.
+     *
      */
     handle(req) {
-        // Quick check to give a better error message when a user attempts to use
-        // HttpClient.jsonp() without installing the HttpClientJsonpModule
-        if (req.method === 'JSONP') {
-            throw new _RuntimeError(-2800 /* RuntimeErrorCode.MISSING_JSONP_MODULE */, (typeof ngDevMode === 'undefined' || ngDevMode) &&
-                `Cannot make a JSONP request without JSONP support. To fix the problem, either add the \`withJsonpSupport()\` call (if \`provideHttpClient()\` is used) or import the \`HttpClientJsonpModule\` in the root NgModule.`);
+        // Firstly, check both the method and response type. If either doesn't match
+        // then the request was improperly routed here and cannot be handled.
+        if (req.method !== 'JSONP') {
+            throw new _RuntimeError(2810 /* RuntimeErrorCode.JSONP_WRONG_METHOD */, ngDevMode && JSONP_ERR_WRONG_METHOD);
         }
-        // Validate that the request is compatible with the XHR backend.
-        ngDevMode && validateXhrCompatibility(req);
-        // Check whether this factory has a special function to load an XHR implementation
-        // for various non-browser environments. We currently limit it to only `ServerXhr`
-        // class, which needs to load an XHR implementation.
-        const xhrFactory = this.xhrFactory;
-        const source = 
-        // Note that `ɵloadImpl` is never defined in client bundles and can be
-        // safely dropped whenever we're running in the browser.
-        // This branching is redundant.
-        // The `ngServerMode` guard also enables tree-shaking of the `from()`
-        // function from the common bundle, as it's only used in server code.
-        typeof ngServerMode !== 'undefined' && ngServerMode && xhrFactory.ɵloadImpl
-            ? from(xhrFactory.ɵloadImpl())
-            : of(null);
-        return source.pipe(switchMap(() => {
-            // Everything happens on Observable subscription.
-            return new Observable((observer) => {
-                // Start by setting up the XHR object with request method, URL, and withCredentials
-                // flag.
-                const xhr = xhrFactory.build();
-                xhr.open(req.method, req.urlWithParams);
-                if (req.withCredentials) {
-                    xhr.withCredentials = true;
-                }
-                // Add all the requested headers.
-                req.headers.forEach((name, values) => xhr.setRequestHeader(name, values.join(',')));
-                // Add an Accept header if one isn't present already.
-                if (!req.headers.has(ACCEPT_HEADER)) {
-                    xhr.setRequestHeader(ACCEPT_HEADER, ACCEPT_HEADER_VALUE);
-                }
-                // Auto-detect the Content-Type header if one isn't present already.
-                if (!req.headers.has(CONTENT_TYPE_HEADER)) {
-                    const detectedType = req.detectContentTypeHeader();
-                    // Sometimes Content-Type detection fails.
-                    if (detectedType !== null) {
-                        xhr.setRequestHeader(CONTENT_TYPE_HEADER, detectedType);
-                    }
-                }
-                if (req.timeout) {
-                    xhr.timeout = req.timeout;
-                }
-                // Set the responseType if one was requested.
-                if (req.responseType) {
-                    const responseType = req.responseType.toLowerCase();
-                    // JSON responses need to be processed as text. This is because if the server
-                    // returns an XSSI-prefixed JSON response, the browser will fail to parse it,
-                    // xhr.response will be null, and xhr.responseText cannot be accessed to
-                    // retrieve the prefixed JSON data in order to strip the prefix. Thus, all JSON
-                    // is parsed by first requesting text and then applying JSON.parse.
-                    xhr.responseType = (responseType !== 'json' ? responseType : 'text');
-                }
-                // Serialize the request body if one is present. If not, this will be set to null.
-                const reqBody = req.serializeBody();
-                // If progress events are enabled, response headers will be delivered
-                // in two events - the HttpHeaderResponse event and the full HttpResponse
-                // event. However, since response headers don't change in between these
-                // two events, it doesn't make sense to parse them twice. So headerResponse
-                // caches the data extracted from the response whenever it's first parsed,
-                // to ensure parsing isn't duplicated.
-                let headerResponse = null;
-                // partialFromXhr extracts the HttpHeaderResponse from the current XMLHttpRequest
-                // state, and memoizes it into headerResponse.
-                const partialFromXhr = () => {
-                    if (headerResponse !== null) {
-                        return headerResponse;
-                    }
-                    const statusText = xhr.statusText || 'OK';
-                    // Parse headers from XMLHttpRequest - this step is lazy.
-                    const headers = new HttpHeaders(xhr.getAllResponseHeaders());
-                    // Read the response URL from the XMLHttpResponse instance and fall back on the
-                    // request URL.
-                    const url = getResponseUrl(xhr) || req.url;
-                    // Construct the HttpHeaderResponse and memoize it.
-                    headerResponse = new HttpHeaderResponse({ headers, status: xhr.status, statusText, url });
-                    return headerResponse;
-                };
-                // Next, a few closures are defined for the various events which XMLHttpRequest can
-                // emit. This allows them to be unregistered as event listeners later.
-                // First up is the load event, which represents a response being fully available.
-                const onLoad = () => {
-                    // Read response state from the memoized partial data.
-                    let { headers, status, statusText, url } = partialFromXhr();
-                    // The body will be read out if present.
-                    let body = null;
-                    if (status !== HTTP_STATUS_CODE_NO_CONTENT) {
-                        // Use XMLHttpRequest.response if set, responseText otherwise.
-                        body = typeof xhr.response === 'undefined' ? xhr.responseText : xhr.response;
-                    }
-                    // Normalize another potential bug (this one comes from CORS).
-                    if (status === 0) {
-                        status = !!body ? HTTP_STATUS_CODE_OK : 0;
-                    }
-                    // ok determines whether the response will be transmitted on the event or
-                    // error channel. Unsuccessful status codes (not 2xx) will always be errors,
-                    // but a successful status code can still result in an error if the user
-                    // asked for JSON data and the body cannot be parsed as such.
-                    let ok = status >= 200 && status < 300;
-                    // Check whether the body needs to be parsed as JSON (in many cases the browser
-                    // will have done that already).
-                    if (req.responseType === 'json' && typeof body === 'string') {
-                        // Save the original body, before attempting XSSI prefix stripping.
-                        const originalBody = body;
-                        body = body.replace(XSSI_PREFIX, '');
-                        try {
-                            // Attempt the parse. If it fails, a parse error should be delivered to the
-                            // user.
-                            body = body !== '' ? JSON.parse(body) : null;
-                        }
-                        catch (error) {
-                            // Since the JSON.parse failed, it's reasonable to assume this might not have
-                            // been a JSON response. Restore the original body (including any XSSI prefix)
-                            // to deliver a better error response.
-                            body = originalBody;
-                            // If this was an error request to begin with, leave it as a string, it
-                            // probably just isn't JSON. Otherwise, deliver the parsing error to the user.
-                            if (ok) {
-                                // Even though the response status was 2xx, this is still an error.
-                                ok = false;
-                                // The parse error contains the text of the body that failed to parse.
-                                body = { error, text: body };
-                            }
-                        }
-                    }
-                    if (ok) {
-                        // A successful response is delivered on the event stream.
-                        observer.next(new HttpResponse({
-                            body,
-                            headers,
-                            status,
-                            statusText,
-                            url: url || undefined,
-                        }));
-                        // The full body has been received and delivered, no further events
-                        // are possible. This request is complete.
-                        observer.complete();
-                    }
-                    else {
-                        // An unsuccessful request is delivered on the error channel.
+        else if (req.responseType !== 'json') {
+            throw new _RuntimeError(2811 /* RuntimeErrorCode.JSONP_WRONG_RESPONSE_TYPE */, ngDevMode && JSONP_ERR_WRONG_RESPONSE_TYPE);
+        }
+        // Check the request headers. JSONP doesn't support headers and
+        // cannot set any that were supplied.
+        if (req.headers.keys().length > 0) {
+            throw new _RuntimeError(2812 /* RuntimeErrorCode.JSONP_HEADERS_NOT_SUPPORTED */, ngDevMode && JSONP_ERR_HEADERS_NOT_SUPPORTED);
+        }
+        // Everything else happens inside the Observable boundary.
+        return new Observable((observer) => {
+            // The first step to make a request is to generate the callback name, and replace the
+            // callback placeholder in the URL with the name. Care has to be taken here to ensure
+            // a trailing &, if matched, gets inserted back into the URL in the correct place.
+            const callback = this.nextCallback();
+            const url = req.urlWithParams.replace(/=JSONP_CALLBACK(&|$)/, `=${callback}$1`);
+            // Construct the <script> tag and point it at the URL.
+            const node = this.document.createElement('script');
+            node.src = url;
+            // A JSONP request requires waiting for multiple callbacks. These variables
+            // are closed over and track state across those callbacks.
+            // The response object, if one has been received, or null otherwise.
+            let body = null;
+            // Whether the response callback has been called.
+            let finished = false;
+            // Set the response callback in this.callbackMap (which will be the window
+            // object in the browser. The script being loaded via the <script> tag will
+            // eventually call this callback.
+            this.callbackMap[callback] = (data) => {
+                // Data has been received from the JSONP script. Firstly, delete this callback.
+                delete this.callbackMap[callback];
+                // Set state to indicate data was received.
+                body = data;
+                finished = true;
+            };
+            // cleanup() is a utility closure that removes the <script> from the page and
+            // the response callback from the window. This logic is used in both the
+            // success, error, and cancellation paths, so it's extracted out for convenience.
+            const cleanup = () => {
+                node.removeEventListener('load', onLoad);
+                node.removeEventListener('error', onError);
+                // Remove the <script> tag if it's still on the page.
+                node.remove();
+                // Remove the response callback from the callbackMap (window object in the
+                // browser).
+                delete this.callbackMap[callback];
+            };
+            // onLoad() is the success callback which runs after the response callback
+            // if the JSONP script loads successfully. The event itself is unimportant.
+            // If something went wrong, onLoad() may run without the response callback
+            // having been invoked.
+            const onLoad = () => {
+                // We wrap it in an extra Promise, to ensure the microtask
+                // is scheduled after the loaded endpoint has executed any potential microtask itself,
+                // which is not guaranteed in Internet Explorer and EdgeHTML. See issue #39496
+                this.resolvedPromise.then(() => {
+                    // Cleanup the page.
+                    cleanup();
+                    // Check whether the response callback has run.
+                    if (!finished) {
+                        // It hasn't, something went wrong with the request. Return an error via
+                        // the Observable error path. All JSONP errors have status 0.
                         observer.error(new HttpErrorResponse({
-                            // The error in this case is the response body (error from the server).
-                            error: body,
-                            headers,
-                            status,
-                            statusText,
-                            url: url || undefined,
+                            url,
+                            status: 0,
+                            statusText: 'JSONP Error',
+                            error: new Error(JSONP_ERR_NO_CALLBACK),
                         }));
+                        return;
                     }
-                };
-                // The onError callback is called when something goes wrong at the network level.
-                // Connection timeout, DNS error, offline, etc. These are actual errors, and are
-                // transmitted on the error channel.
-                const onError = (error) => {
-                    const { url } = partialFromXhr();
-                    const res = new HttpErrorResponse({
-                        error,
-                        status: xhr.status || 0,
-                        statusText: xhr.statusText || 'Unknown Error',
-                        url: url || undefined,
-                    });
-                    observer.error(res);
-                };
-                let onTimeout = onError;
-                if (req.timeout) {
-                    onTimeout = (_) => {
-                        const { url } = partialFromXhr();
-                        const res = new HttpErrorResponse({
-                            error: new DOMException('Request timed out', 'TimeoutError'),
-                            status: xhr.status || 0,
-                            statusText: xhr.statusText || 'Request timeout',
-                            url: url || undefined,
-                        });
-                        observer.error(res);
-                    };
-                }
-                // The sentHeaders flag tracks whether the HttpResponseHeaders event
-                // has been sent on the stream. This is necessary to track if progress
-                // is enabled since the event will be sent on only the first download
-                // progress event.
-                let sentHeaders = false;
-                // The download progress event handler, which is only registered if
-                // progress events are enabled.
-                const onDownProgress = (event) => {
-                    // Send the HttpResponseHeaders event if it hasn't been sent already.
-                    if (!sentHeaders) {
-                        observer.next(partialFromXhr());
-                        sentHeaders = true;
-                    }
-                    // Start building the download progress event to deliver on the response
-                    // event stream.
-                    let progressEvent = {
-                        type: HttpEventType.DownloadProgress,
-                        loaded: event.loaded,
-                    };
-                    // Set the total number of bytes in the event if it's available.
-                    if (event.lengthComputable) {
-                        progressEvent.total = event.total;
-                    }
-                    // If the request was for text content and a partial response is
-                    // available on XMLHttpRequest, include it in the progress event
-                    // to allow for streaming reads.
-                    if (req.responseType === 'text' && !!xhr.responseText) {
-                        progressEvent.partialText = xhr.responseText;
-                    }
-                    // Finally, fire the event.
-                    observer.next(progressEvent);
-                };
-                // The upload progress event handler, which is only registered if
-                // progress events are enabled.
-                const onUpProgress = (event) => {
-                    // Upload progress events are simpler. Begin building the progress
-                    // event.
-                    let progress = {
-                        type: HttpEventType.UploadProgress,
-                        loaded: event.loaded,
-                    };
-                    // If the total number of bytes being uploaded is available, include
-                    // it.
-                    if (event.lengthComputable) {
-                        progress.total = event.total;
-                    }
-                    // Send the event.
-                    observer.next(progress);
-                };
-                // By default, register for load and error events.
-                xhr.addEventListener('load', onLoad);
-                xhr.addEventListener('error', onError);
-                xhr.addEventListener('timeout', onTimeout);
-                xhr.addEventListener('abort', onError);
-                // Progress events are only enabled if requested.
-                if (req.reportProgress) {
-                    // Download progress is always enabled if requested.
-                    xhr.addEventListener('progress', onDownProgress);
-                    // Upload progress depends on whether there is a body to upload.
-                    if (reqBody !== null && xhr.upload) {
-                        xhr.upload.addEventListener('progress', onUpProgress);
-                    }
+                    // Success. body either contains the response body or null if none was
+                    // returned.
+                    observer.next(new HttpResponse({
+                        body,
+                        status: HTTP_STATUS_CODE_OK,
+                        statusText: 'OK',
+                        url,
+                    }));
+                    // Complete the stream, the response is over.
+                    observer.complete();
+                });
+            };
+            // onError() is the error callback, which runs if the script returned generates
+            // a Javascript error. It emits the error via the Observable error channel as
+            // a HttpErrorResponse.
+            const onError = (error) => {
+                cleanup();
+                // Wrap the error in a HttpErrorResponse.
+                observer.error(new HttpErrorResponse({
+                    error,
+                    status: 0,
+                    statusText: 'JSONP Error',
+                    url,
+                }));
+            };
+            // Subscribe to both the success (load) and error events on the <script> tag,
+            // and add it to the page.
+            node.addEventListener('load', onLoad);
+            node.addEventListener('error', onError);
+            this.document.body.appendChild(node);
+            // The request has now been successfully sent.
+            observer.next({ type: HttpEventType.Sent });
+            // Cancellation handler.
+            return () => {
+                if (!finished) {
+                    this.removeListeners(node);
                 }
-                // Fire the request, and notify the event stream that it was fired.
-                xhr.send(reqBody);
-                observer.next({ type: HttpEventType.Sent });
-                // This is the return from the Observable function, which is the
-                // request cancellation handler.
-                return () => {
-                    // On a cancellation, remove all registered event listeners.
-                    xhr.removeEventListener('error', onError);
-                    xhr.removeEventListener('abort', onError);
-                    xhr.removeEventListener('load', onLoad);
-                    xhr.removeEventListener('timeout', onTimeout);
-                    if (req.reportProgress) {
-                        xhr.removeEventListener('progress', onDownProgress);
-                        if (reqBody !== null && xhr.upload) {
-                            xhr.upload.removeEventListener('progress', onUpProgress);
-                        }
-                    }
-                    // Finally, abort the in-flight request.
-                    if (xhr.readyState !== xhr.DONE) {
-                        xhr.abort();
-                    }
-                };
-            });
-        }));
+                // And finally, clean up the page.
+                cleanup();
+            };
+        });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: HttpXhrBackend, deps: [{ token: XhrFactory }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: HttpXhrBackend });
+    removeListeners(script) {
+        // Issue #34818
+        // Changing <script>'s ownerDocument will prevent it from execution.
+        // https://html.spec.whatwg.org/multipage/scripting.html#execute-the-script-block
+        foreignDocument ??= this.document.implementation.createHTMLDocument();
+        foreignDocument.adoptNode(script);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: JsonpClientBackend, deps: [{ token: JsonpCallbackContext }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: JsonpClientBackend });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: HttpXhrBackend, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: JsonpClientBackend, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: XhrFactory }] });
+        }], ctorParameters: () => [{ type: JsonpCallbackContext }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }] });
+/**
+ * Identifies requests with the method JSONP and shifts them to the `JsonpClientBackend`.
+ */
+function jsonpInterceptorFn(req, next) {
+    if (req.method === 'JSONP') {
+        return inject(JsonpClientBackend).handle(req);
+    }
+    // Fall through for normal HTTP requests.
+    return next(req);
+}
+/**
+ * Identifies requests with the method JSONP and
+ * shifts them to the `JsonpClientBackend`.
+ *
+ * @see {@link HttpInterceptor}
+ *
+ * @publicApi
+ */
+class JsonpInterceptor {
+    injector;
+    constructor(injector) {
+        this.injector = injector;
+    }
+    /**
+     * Identifies and handles a given JSONP request.
+     * @param initialRequest The outgoing request object to handle.
+     * @param next The next interceptor in the chain, or the backend
+     * if no interceptors remain in the chain.
+     * @returns An observable of the event stream.
+     */
+    intercept(initialRequest, next) {
+        return runInInjectionContext(this.injector, () => jsonpInterceptorFn(initialRequest, (downstreamRequest) => next.handle(downstreamRequest)));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: JsonpInterceptor, deps: [{ token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: JsonpInterceptor });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: JsonpInterceptor, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i0.EnvironmentInjector }] });
 
-const XSRF_ENABLED = new InjectionToken(ngDevMode ? 'XSRF_ENABLED' : '');
+const XSRF_ENABLED = new InjectionToken(ngDevMode ? 'XSRF_ENABLED' : '', {
+    factory: () => true,
+});
 const XSRF_DEFAULT_COOKIE_NAME = 'XSRF-TOKEN';
 const XSRF_COOKIE_NAME = new InjectionToken(ngDevMode ? 'XSRF_COOKIE_NAME' : '', {
     providedIn: 'root',
@@ -2743,13 +2759,6 @@ const XSRF_HEADER_NAME = new InjectionToken(ngDevMode ? 'XSRF_HEADER_NAME' : '',
     providedIn: 'root',
     factory: () => XSRF_DEFAULT_HEADER_NAME,
 });
-/**
- * Retrieves the current XSRF token to use with the next outgoing request.
- *
- * @publicApi
- */
-class HttpXsrfTokenExtractor {
-}
 /**
  * `HttpXsrfTokenExtractor` which retrieves the token from a cookie.
  */
@@ -2779,10 +2788,11 @@ class HttpXsrfCookieExtractor {
         return this.lastToken;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: HttpXsrfCookieExtractor, deps: [{ token: DOCUMENT }, { token: XSRF_COOKIE_NAME }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: HttpXsrfCookieExtractor });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: HttpXsrfCookieExtractor, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: HttpXsrfCookieExtractor, decorators: [{
-            type: Injectable
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -2790,6 +2800,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2",
                     type: Inject,
                     args: [XSRF_COOKIE_NAME]
                 }] }] });
+/**
+ * Retrieves the current XSRF token to use with the next outgoing request.
+ *
+ * @publicApi
+ */
+class HttpXsrfTokenExtractor {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: HttpXsrfTokenExtractor, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: HttpXsrfTokenExtractor, providedIn: 'root', useExisting: HttpXsrfCookieExtractor });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: HttpXsrfTokenExtractor, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root', useExisting: HttpXsrfCookieExtractor }]
+        }] });
 function xsrfInterceptorFn(req, next) {
     const lcUrl = req.url.toLowerCase();
     // Skip both non-mutating requests and absolute URLs.
@@ -2891,7 +2914,6 @@ function provideHttpClient(...features) {
     }
     const providers = [
         HttpClient,
-        HttpXhrBackend,
         HttpInterceptorHandler,
         { provide: HttpHandler, useExisting: HttpInterceptorHandler },
         {
@@ -2905,8 +2927,6 @@ function provideHttpClient(...features) {
             useValue: xsrfInterceptorFn,
             multi: true,
         },
-        { provide: XSRF_ENABLED, useValue: true },
-        { provide: HttpXsrfTokenExtractor, useClass: HttpXsrfCookieExtractor },
     ];
     for (const feature of features) {
         providers.push(...feature.ɵproviders);