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

ruksad picture ruksad · Dec 1, 2016 · Viewed 9.6k times · Source

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

Answer

Nitzan Tomer picture Nitzan Tomer · Dec 1, 2016

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.