Internet Explorer 11, ECMAScript Object property assignment problem

Question

In my Angular7 app, I made some changes (angular7 upgrade and package dependencies upgrades etc.) and I notice that my app doesn't work on PROD Internet Explorer 11 properly. I'm not having any issue when im working on localhost, but after i publish my app to PROD it gives me error below:

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

I investigated to main-client.js, I found this:

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

defineInjectable need to be "defineInjectable": defineInjectable. I've tested this in IE11 developer tool with following example,

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

But this is what IE11 wants:

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

PS: I am using webpack for building application. The problem might be about ECMAScript version or because of Webpack however I couldn't able to point it out. If anyone want my webpack.config files, I can also add it. Here is my tsconfig files:

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"]
}

Answer 1

I've solved this issue by editing webpack.config.js and webpack.config.vendor.js TerserPlugin (alternative of UglifyJsPlugin), note that plugin options repeating in both files (webpack.config.js and webpack.config.vendor.js). All of them needs to be edited.

In webpack.config.js and 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
    })

And this is where I found the solution,

• https://github.com/MarkPieszak/aspnetcore-angular-universal/issues/706
• https://github.com/MarkPieszak/aspnetcore-angular-universal/issues/666
• https://ariya.io/2013/03/es6-and-method-definitions

I hope it will help.