Angular app not loading in IE 11 when the target is es6

Question

I am creating a new application and my target browser is IE11. When I use the target as es6 my app doesn't load and shows the error as shown below.

But when I change the target to es5 everything seems to work fine. My doubt is, the polyfills are added to make sure the newer JavaScript functions are supported in the legacy browsers. I have enabled all the polyfills targeting es6 as shown 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
 */

My question is even though all the polyfills targeting es6 are imported, why my app is not coming? Am I missing something here? Please help.

Response to proposed duplicate

I believe this is not a duplicate of this question. I have the solution (to change ES6 to ES5). But the answer in that question doesn't say why ES6 is not supported even though polyfills are added. I believe the question is totally different with different answer expected.

Answer 1

As the Angular documentation states: Differential loading is currently only supported when using es2015 as a compilation target. When used with targets higher than es2015, a warning is emitted during build time. https://v8.angular.io/guide/deployment#differential-loading

This simply means that in tsconfig you must use "target": "es2015",

You also have to make sure to configure the browserslist (or package.json alternatively) file correctly. Probably you want to add a zone-flags.ts.

Last, if you use things like Object.values, you must also import 'core-js/es7/object';into your polyfills file, others if you use additional things of course.

Answer 2

You are app doesn't work cause most of ES6 functions are not supported by IE11. You must targetting your app in ES5.

You can see what IE11 support from with ES6 here: ECMA compatibilty