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

{ "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" ] } } @Cleiton this is how my tsconfig file looks like — ruksad
– ruksad, Commented Dec 1, 2016 at 16:34
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 — ruksad
– ruksad, Commented Dec 2, 2016 at 4:23

Nitzan Tomer · Accepted Answer · 2016-12-01 14:40:47Z

4

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.

answered Dec 1, 2016 at 14:40

Nitzan Tomer

166k51 gold badges330 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related