Internet Explorer 11,ECMAScript对象属性分配问题

时间:2018-12-12 12:30:41

标签: angular typescript webpack ecmascript-6

在Angular7应用程序中,我做了一些更改(angular7升级和程序包依赖项升级等),我注意到我的应用程序无法在PROD Internet Explorer 11上正常运行。我在本地主机上工作时没有任何问题,但是在将应用发布到PROD之后,出现以下错误:

SCRIPT1003: Expected ':'
main-client.js (559,109)

我调查了main-client.js,发现了这一点

Pr={"ɵdefineBase":defineBase,
"ɵdefineComponent":defineComponent,
"ɵdefineDirective":H,
defineInjectable, ## This is line:559 and column:109 ##

defineInjectable必须为“ defineInjectable”:defineInjectable。我已经在IE11开发人员工具中通过以下示例对此进行了测试,

c = 3; d=4; values = {a:1, b:2, c, d} output is: Expected ':'

但这就是IE11想要的:

c = 3; d=4; values = {a:1, b:2, c:c, d:d} outpus is: OK

PS:我正在使用Webpack构建应用程序。问题可能与ECMAScript版本有关,或者由于Webpack而引起,但是我无法指出。如果有人需要我的webpack.config文件,我也可以添加它。 这是我的tsconfig文件:

tsconfig.json

    {
  "compilerOptions": {
    "moduleResolution": "node",
    "module": "es2015",
    "target": "es5",
    "alwaysStrict": true,
    "noImplicitAny": false,
    "sourceMap": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "skipDefaultLibCheck": true,
    "skipLibCheck": true,
    "allowUnreachableCode": false,
    "lib": [
      "es2016",
      "dom"
    ],
    "types": [ "node" ]
  },
  "include": [
    "ClientApp"
  ]
}

tsconfig.app.json

    {
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "baseUrl": "",
    "sourceMap": true,
    "types": ["node"]
  },
  "exclude": [
    "test.ts", 
    "**/*.spec.ts"
  ]
}

tsconfig.spec.json

    {
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "module": "commonjs",
    "target": "es5",
    "baseUrl": "",
    "types": ["jasmine", "node"]
  },
  "files": ["polyfills.ts"],
  "include": ["**/*.spec.ts", "**/*.d.ts"]
}

1 个答案:

答案 0 :(得分:1)

我已经通过编辑webpack.config.js和webpack.config.vendor.js TerserPlugin(UglifyJsPlugin的替代品)解决了这个问题,请注意,插件选项在两个文件(webpack.config.js和webpack.config)中都重复。 vendor.js)。所有这些都需要编辑。

webpack.config.js webpack.config.vendor.js

    new TerserPlugin({ //or UglifyJsPlugin
      cache: true,
      parallel: true,
      terserOptions: {
        compress: false,
        ecma: 6, //Setting this to "ecma: 5" solved problem.
        mangle: true,
        keep_classnames: true,
        keep_fnames: true
      },
      sourceMap: true
    })

这是我找到解决方案的地方,

我希望它会有所帮助。