fix(http): Send query params on fetch request (#50740)

QueryParams were missing when using the `FetchBackend`.

Fixes #50728

PR Close #50740

packages/common/http/src/fetch.ts

@@ -65,7 +65,7 @@ export class FetchBackend implements HttpBackend {
     let response;
 
     try {
-      const fetchPromise = this.fetchImpl(request.url, {signal, ...init});
+      const fetchPromise = 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
@@ -81,15 +81,15 @@ export class FetchBackend implements HttpBackend {
         error,
         status: error.status ?? 0,
         statusText: error.statusText,
-        url: request.url,
+        url: request.urlWithParams,
         headers: error.headers,
       }));
       return;
     }
 
     const headers = new HttpHeaders(response.headers);
     const statusText = response.statusText;
-    const url = getResponseUrl(response) ?? request.url;
+    const url = getResponseUrl(response) ?? request.urlWithParams;
 
     let status = response.status;
     let body: string|ArrayBuffer|Blob|object|null = null;
@@ -143,7 +143,7 @@ export class FetchBackend implements HttpBackend {
           headers: new HttpHeaders(response.headers),
           status: response.status,
           statusText: response.statusText,
-          url: getResponseUrl(response) ?? request.url,
+          url: getResponseUrl(response) ?? request.urlWithParams,
         }));
         return;
       }

packages/common/http/test/fetch_spec.ts

@@ -11,7 +11,7 @@ import {TestBed} from '@angular/core/testing';
 import {Observable, of, Subject} from 'rxjs';
 import {catchError, retry, scan, skip, take, toArray} from 'rxjs/operators';
 
-import {HttpDownloadProgressEvent, HttpErrorResponse, HttpHeaderResponse, HttpStatusCode} from '../public_api';
+import {HttpDownloadProgressEvent, HttpErrorResponse, HttpHeaderResponse, HttpParams, HttpStatusCode} from '../public_api';
 import {FetchBackend, FetchFactory} from '../src/fetch';
 
 function trackEvents(obs: Observable<any>): Promise<any[]> {
@@ -94,6 +94,16 @@ describe('FetchBackend', async () => {
     expect(fetchMock.request.url).toBe('/test');
   });
 
+  it('use query params from request', () => {
+    const requestWithQuery = new HttpRequest('GET', '/test', 'some body', {
+      params: new HttpParams({fromObject: {query: 'foobar'}}),
+      responseType: 'text',
+    });
+    callFetchAndFlush(requestWithQuery);
+    expect(fetchMock.request.method).toBe('GET');
+    expect(fetchMock.request.url).toBe('/test?query=foobar');
+  });
+
   it('sets outgoing body correctly', () => {
     callFetchAndFlush(TEST_POST);
     expect(fetchMock.request.body).toBe('some body');