IE11 issue Angular CLI project in Angular2(TS), polyfills are notworking

Question

I am using anugular-cli 1.0.0-beta.16 which has polyfills.ts which looks like this:

// This file includes polyfills needed by Angular 2 and is loaded before
// the app. You can add your own extra polyfills to this file.
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/set';
import 'core-js/es6/reflect';

import 'core-js/es7/reflect';
import 'zone.js/dist/zone';

But this pollyfills file is not working on IE11 and it works on Chrome, Firefox, EDGE and my main.ts looks like this:

import "./polyfills.ts";
import {platformBrowserDynamic} from "@angular/platform-browser-dynamic";
import {enableProdMode} from "@angular/core";
import {environment} from "./environments/environment";
import {AppModule} from "./app/";

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

Running this on IE11 produces shows error on fat arrow expression error

SCRIPT1002: Syntax error

For minifiedjs at this position:

function arrayUnion(arr1, arr2) {
    return arr1
        .concat(arr2.filter(v => arr1.indexOf(v) === -1));
}

and this is how my tsconfig.json looks like

    {
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ]
  }
}

@Cleton this is how my tsconfig looks like

Weakminded

Could you show your tsconfig file? – Inundate

{ "compilerOptions": { "declaration": false, "emitDecoratorMetadata": true, "experimentalDecorators": true, "lib": ["es6", "dom"], "mapRoot": "./", "module": "es6", "moduleResolution": "node", "outDir": "../dist/out-tsc", "sourceMap": true, "target": "es5", "typeRoots": [ "../node_modules/@types" ] } } @Inundate this is how my tsconfig file looks like – Weakminded

You tsconfig looks ok, but it is on root of your project? – Inundate

Cleiton thanks for taking efforts , this is an angular-cli project and it puts tsconfig.json in src folder where files like 1.index.html 2.main.ts 3.polyfills.ts 4.typings.d.ts resides – Weakminded

Answer 1

You are probably targeting es6, which compiles the arrow functions to arrow functions:

let fn = () => console.log("hey");

Compiles to:

let fn = () => console.log("hey");

But if you target es5 it compiles to:

var fn = function () { return console.log("hey"); };

It seems that IE11 (or any other version of explorer) do not yet support arrow functions.
If you want to support it you'll have to target es5 or below, as there is no pollyfil for arrow functions.

Splotch