Internet Explorer 11, проблема назначения свойств объекта ECMAScript

Question

В моем приложении Angular7 я внес некоторые изменения (обновление angular7 и обновления зависимостей пакетов и т. Д.) И заметил, что мое приложение не работает должным образом в PROD Internet Explorer 11.У меня нет никаких проблем, когда я работаю на localhost, но после того, как я публикую свое приложение в 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: я использую веб-пакет для сборки приложения.Проблема может быть связана с версией 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"]
}

Answer 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
    })

Авот где я нашел решение:

• 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

Я надеюсь, что этопоможет.