Angular 7：npm 包中的“类”需要 polyfill答案

【问题标题】：Angular 7: need polyfill for 'Class' in npm packageAngular 7：npm 包中的“类”需要 polyfill
【发布时间】：2019-07-11 13:31:34
【问题描述】：

我遇到的问题是我基于 Angular 7 的应用无法在 IE 11 中运行。

我正在使用从 index.js 开始的 npm 包

class PackageClass { 
   // code
}

并且在所有浏览器中它都可以正常工作，它会做它应该做的事情。但是在 IE11 浏览器中甚至无法打开应用程序，它会失败并显示错误：Syntax error. File: vendor.js line ...。并且错误导致类定义。

我已经在应用中的 Polyfills：

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


/**
 * Required to support Web Animations `@angular/platform-browser/animations`.
 * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
 **/
// import 'web-animations-js';  // Run `npm install --save web-animations-js`.



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



/***************************************************************************************************
 * APPLICATION IMPORTS
 */
import 'core-js/es7/object';
import 'core-js/es7/array';

我该如何解决（在 IE11 中运行我的应用程序）？我认为 polyfills 应该做这项工作。

【问题讨论】：

标签： angular typescript internet-explorer-11 polyfills

【解决方案1】：

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

在 Angular 7 应用程序中，如果我们想定义一个类，我们可以使用 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。

此外，还有另一种方法，您可以使用babel 将您的代码转译为 ES5

【讨论】：