fix(http): include query params in the XHR backend fallback URL

When the browser did not provide a response URL, as happens on network
errors and timeouts, HttpXhrBackend fell back on `req.url`, which leaves
out the query params. So `HttpErrorResponse.url` and its message showed
`/api/items` for a request to `/api/items?page=2`.

Fall back on `req.urlWithParams`, which is the URL the request was sent
to and what FetchBackend already uses.

Author: MeAkib

packages/common/http/src/xhr.ts

@@ -219,7 +219,7 @@ export class HttpXhrBackend implements HttpBackend {
 
             // Read the response URL from the XMLHttpResponse instance and fall back on the
             // request URL.
-            const url = xhr.responseURL || req.url;
+            const url = xhr.responseURL || req.urlWithParams;
 
             // Construct the HttpHeaderResponse and memoize it.
             headerResponse = new HttpHeaderResponse({headers, status: xhr.status, statusText, url});

packages/common/http/test/xhr_spec.ts

@@ -10,6 +10,7 @@ import {TestBed} from '@angular/core/testing';
 import {Observable} from 'rxjs';
 import {toArray} from 'rxjs/operators';
 import {XhrFactory} from '../../index';
+import {HttpParams} from '../src/params';
 import {HttpRequest} from '../src/request';
 import {
   HttpDownloadProgressEvent,
@@ -425,6 +426,29 @@ describe('XhrBackend', () => {
       factory.mock.responseURL = '/response/url';
       factory.mock.mockFlush(HttpStatusCode.Ok, 'OK', 'Test');
     });
+    it('falls back on the request URL with params', (done) => {
+      backend
+        .handle(TEST_POST.clone({params: new HttpParams({fromObject: {page: '2'}})}))
+        .pipe(toArray())
+        .subscribe((events) => {
+          const response = events[1] as HttpResponse<string>;
+          expect(response.url).toBe('/test?page=2');
+          done();
+        });
+      factory.mock.mockFlush(HttpStatusCode.Ok, 'OK', 'Test');
+    });
+    it('includes the params in the URL of a network error', (done) => {
+      backend
+        .handle(TEST_POST.clone({params: new HttpParams({fromObject: {page: '2'}})}))
+        .subscribe({
+          error: (err: HttpErrorResponse) => {
+            expect(err.url).toBe('/test?page=2');
+            expect(err.message).toContain('/test?page=2');
+            done();
+          },
+        });
+      factory.mock.mockErrorEvent(new Error('blah'));
+    });
     it('falls back on Request.url if neither are available', (done) => {
       backend
         .handle(TEST_POST)