【问题标题】:Angular 6 target es5 IE Syntax error (arrow function)Angular 6 目标 es5 IE 语法错误(箭头函数)
【发布时间】:2020-05-11 10:54:19
【问题描述】:

IE 中的错误: vendor.js (82613,35)

const emitsWrappingTags = (node) => {
  return !!node.kind;
};

基本上说IE不知道箭头函数是什么。

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "../wwwroot/dist/out-tsc",
    "sourceMap": false,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true
  },
  "exclude": [
    "node_modules"
  ]
}

polyfills.ts

 /** IE9, IE10 and IE11 requires all of the following polyfills. **/
 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/weak-map';
 import 'core-js/es6/set';
 /** IE10 and IE11 requires the following for NgClass support on SVG elements */
 import 'classlist.js';  // Run `npm install --save classlist.js`.
 /** IE10 and IE11 requires the following for the Reflect API. */
 import 'core-js/es6/reflect';
 /** Evergreen browsers require these. **/
 // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
 import 'core-js/es7/reflect';

 * Zone JS is required by default for Angular itself.
 */
 import 'zone.js/dist/zone';  // Included with Angular CLI.

package.json

{
  "name": "client-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.1.10",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.1.0",
    "@fortawesome/angular-fontawesome": "^0.2.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "angular-highlightjs": "^0.6.2",
    "bootstrap": "^4.4.1",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.5.4",
    "highlightjs": "^9.8.0",
    "jquery": "^3.5.0",
    "moment": "^2.24.0",
    "ngx-bootstrap": "^3.0.1",
    "ngx-highlight-js": "^2.1.1",
    "ngx-highlightjs": "^3.0.3",
    "ngx-toastr": "^8.10.2",
    "nl2br-pipe": "^1.1.0",
    "rxjs": "~6.2.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.8.0",
    "@angular/cli": "~6.2.4",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.3.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~2.9.2"
  }
}

tsconfig.app.json

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

我已经为他们看到了多个类似的问题和解决方案,但没有一个适用于我的项目。 无论上述设置如何,Typescript 都会编译为 es6。我猜它与节点包有关,但找不到。

【问题讨论】:

  • 那你的tsconfig.app.json 目标可能在那里被覆盖了?
  • 很遗憾没有。我已经添加了 tsconfig.app.json 来发帖。
  • 啊,但是它来自vendor.js,这意味着它来自一个已经编译好的第三方库。你应该找出哪个是:)

标签: angular typescript angular6 ecmascript-5


【解决方案1】:

我找到了导致问题的原因。在我的 package.json 中,我有:

 "highlightjs": "^9.8.0"

后来我看到 package-lock.json 的版本是 10.0.0

"highlight.js": {
      "version": "10.0.0",

如我们所见: https://github.com/highlightjs/highlight.js/blob/master/VERSION_10_UPGRADE.md

如果您的用户使用非常旧的浏览器,他们可能不再受支持 (不再有 IE11 等)。 (我们现在使用的是 ES2015 代码。)

似乎它不是那么向后兼容:D

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2018-06-15
    • 1970-01-01
    • 1970-01-01
    • 2016-06-03
    • 2017-12-13
    • 2021-02-13
    • 1970-01-01
    相关资源
    最近更新 更多