Angular 7: need polyfill for 'Class' in npm package

Question

I faced with problem that my app based on Angular 7 doesn't working in IE 11.

I'm using npm package which starts in index.js from

class PackageClass { 
   // code
}

And at all browsers it works fine, it do what it should do. But in IE11 browser even can't open an app, it fails with an error: Syntax error. File: vendor.js line .... And error leads to the class definition.

Polyfills that I have already in app:

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

How can I solve it (run my app in IE11)? I think that polyfills should do this work.

Answer 1

The JavaScript classes not supported the IE browser, you could check the JavaScript Classes Browser compatibility.

In the angular 7 application, if we want to define a class, we could create a class using typescript.

For example, create a Hero class in the src/app folder, named hero.ts.

Code in src/app/hero.ts

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

Then in the component class, we could import the Hero class, and use the Hero class using the following code:

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() {
  }

}

More detail information about angular application, please check the angular document.

Besides, there is another method, you could use babel to transpile your code to ES5