SCRIPT1002：语法错误 - IE11 和 Angular答案

【问题标题】：SCRIPT1002: Syntax error - IE11 and AngularSCRIPT1002：语法错误 - IE11 和 Angular
【发布时间】：2020-06-18 10:01:22
【问题描述】：

从 IE11 打开 Angular 项目时出现以下错误：

SCRIPT1002: Syntax error
vendor.js (224520,1)

产生错误的行 (224520) 如下所示：

class PreventableEvent {
    constructor() {
        this.prevented = false;
    }
...

所以，问题很清楚。打字稿尚未完全转换。现在我被卡住了，因为我不知道如何解决它。

包含未转译输出的文件位于./node_modules/@progress/kendo-angular-layout/dist/es2015/tabstrip/tabstrip-events.js。

所以，我觉得我需要以某种方式使用不同版本的文件（如果存在于某处）或让 Angular 转译文件或做一些完全不同的事情。

您能否通过建议我可以采取的解决上述问题的步骤来帮助我使我的应用在 IE11 中运行？

另外，我刚刚检查了 Chrome 是否有相同的代码（我的意思是 vendor.js 的 224520 行中的 class...）。它工作得很好。我相信这是因为 Chrome 支持 class 关键字。

【问题讨论】：

标签： angular kendo-ui internet-explorer-11

【解决方案1】：

当我直接使用 SelectedEvent from 时，我遇到了类似的问题：

import { SelectEvent } from '@progress/kendo-angular-layout/dist/**es2015**/tabstrip/tabstrip-events';

IE 11 不支持 es2015 搞错了

我应该使用不同路径的对象：

from '@progress/kendo-angular-layout/dist/**es**/tabstrip/tabstrip-events';

或者让角度自动选择你应该选择的版本。

from '@progress/kendo-angular-layout/';

请检查您是否使用了正确的es版本。

【讨论】：

就是这样。非常感谢你。 (y)

【解决方案2】：

JavaScript类不支持IE浏览器，可以查看JavaScript Classes Browser compatibility。

在 Angular 应用中，如果我们想定义一个类，我们可以使用 typescript 创建一个模型类。

例如，在 src/app 文件夹中创建一个 Hero 类，命名为 hero.ts。

src/app/hero.ts 中的代码

export class Hero {
  id: number;
  name: string;
}

然后在组件类中，我们可以导入 Hero 类，使用 Hero 类，代码如下：

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };

  constructor() { }

  ngOnInit() {
  }

}

更多关于Angular应用的详细信息，请查看angular document。

另外，对于 Angular 应用程序，如果 Angular 版本低于或等于 Angular 7，请检查 polyfill.ts 文件，确保取消注释 IE 浏览器的相关 polyfill，如下所示：

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

如果您使用的是 Angular 8+，请检查this link 将应用程序配置为运行 es5 模式。

【讨论】：