IE11 在 Angular2(TS) 中发布 Angular CLI 项目，polyfill 不起作用 [英] IE11 issue Angular CLI project in Angular2(TS), polyfills are notworking

问题描述

我正在使用 anugular-cli 1.0.0-beta.16，它的 polyfills.ts 如下所示:

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';

但是这个 pollyfills 文件在 IE11 上不起作用，它在 Chrome、Firefox、EDGE 上起作用，我的 main.ts 看起来像这样:

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);

在 IE11 上运行这个会产生显示错误的粗箭头表达式错误

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

SCRIPT1002: Syntax error

对于这个位置的 minifiedjs:

For minifiedjs at this position:

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

这就是我的 tsconfig.json 的样子

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 这就是我的 tsconfig 的样子

@Cleton this is how my tsconfig looks like

推荐答案

您的目标可能是 es6，它将箭头函数编译为箭头函数:

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

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

编译为:

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

但是如果你的目标是 es5 它会编译为:

But if you target es5 it compiles to:

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

似乎 IE11(或任何其他版本的资源管理器)尚不支持箭头功能.
如果你想支持它，你必须针对 es5 或更低版本，因为箭头函数没有 pollyfil.

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.

这篇关于IE11 在 Angular2(TS) 中发布 Angular CLI 项目，polyfill 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！