HTTP GET Parameters not getting constructed by Angular 7.2 on IE 11

Question

I use HttpParams in an HTTP get request of my Angular 7.2.0 application. After I building the project using "ng build --extract-css --aot" command, run the application and log the HttpParams value on the console, I can see the parameter value on the console, but it is not reflected in the http request on the network tab. Please advise me on this.

This solution works fine in Chrome, I am getting this issue only when I am using IE.

I tried the same approach with and without "application/json" headers, but no difference.

I tried this with all the polyfills enabled, it didn't fix the issue either.

analytics.service.ts

import { ErrorsService } from 'src/app/shared/services/errors.service';
import { Observable } from 'rxjs';
import { Activity } from 'src/app/models/Activity';
import { HttpParams, HttpClient, HttpHeaders } from '@angular/common/http';
import { catchError } from 'rxjs/operators';


@Injectable()
export class AnalyticsService {
  routePrefix = 'api/analytics';

  constructor(private http: HttpClient, private errorsService: ErrorsService) { }

  public getSessionActivities(duration): Observable<Activity[]> {
    let headers = new HttpHeaders();
    headers.append('Content-Type', 'application/json');

    const requestParams = new HttpParams().set('duration', duration);
    console.log("---Get Session Activities---", requestParams);

    return this.http.get<Activity[]>(this.routePrefix, { headers: headers, params: requestParams }).pipe(
      catchError(err => this.errorsService.handleError(err))
    );
  }
}
import { Injectable } from '@angular/core';
import { ErrorsService } from 'src/app/shared/services/errors.service';
import { Observable } from 'rxjs';
import { Activity } from 'src/app/models/Activity';
import { HttpParams, HttpClient, HttpHeaders } from '@angular/common/http';
import { catchError } from 'rxjs/operators';


@Injectable()
export class AnalyticsService {
  routePrefix = 'api/analytics';

  constructor(private http: HttpClient, private errorsService: ErrorsService) { }

  public getSessionActivities(duration): Observable<Activity[]> {
    let headers = new HttpHeaders();
    headers.append('Content-Type', 'application/json');

    const requestParams = new HttpParams().set('duration', duration);
    console.log("---Get Session Activities---", requestParams);

    return this.http.get<Activity[]>(this.routePrefix, { headers: headers, params: requestParams }).pipe(
      catchError(err => this.errorsService.handleError(err))
    );
  }
}

.NET core backend

IE Network tab

IE Console

Chrome Network Tab

Angular version

IE version

Answer 1

I was able to fix this issue by adding some extra polyfill which was not added to the polyfills.ts by default. The credit should goes to 'core-js/es7/reflect'. Please see the complete content of the polyfills.ts below.

 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 *
 * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
 * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
 * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
 */

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
 import 'core-js/es6/symbol';
 import 'core-js/es6/object';
 import 'core-js/es6/function';
 import 'core-js/es6/parse-int';
 import 'core-js/es6/parse-float';
 import 'core-js/es6/number';
 import 'core-js/es6/math';
 import 'core-js/es6/string';
 import 'core-js/es6/date';
 import 'core-js/es6/array';
 import 'core-js/es6/regexp';
 import 'core-js/es6/map';
 import 'core-js/es6/weak-map';
 import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
 import 'classlist.js';  // Run `npm install --save classlist.js`.

/** IE10 and IE11 requires the following for the Reflect API. */
 import 'core-js/es6/reflect';


/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';


/**
 * Web Animations `@angular/platform-browser/animations`
 * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
 * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
 **/
// import 'web-animations-js';  // Run `npm install --save web-animations-js`.

/**
 * By default, zone.js will patch all possible macroTask and DomEvents
 * user can disable parts of macroTask/DomEvents patch by setting following flags
 */

 // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
 // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
 // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames

 /*
 * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
 * with the following flag, it will bypass `zone.js` patch for IE/Edge
 */
// (window as any).__Zone_enable_cross_context_check = true;

/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.



/***************************************************************************************************
 * APPLICATION IMPORTS
 */

Thank you.