CODEWITHSUNDEEP
angularkendo-uiinternet-explorer-11
Sasuke Uchiha
Sasuke Uchiha

Reputation: 1083

SCRIPT1002: Syntax error - IE11 and Angular

I am getting the following error when opening the Angular project from IE11:

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

The line (224520) which produces the error looks like this:

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

So, the issue is clear. The typescript has not being transpiled completely. Now I am stuck because I do not know how could I fix it.

The file which contains the non transpiled output is situated at ./node_modules/@progress/kendo-angular-layout/dist/es2015/tabstrip/tabstrip-events.js.

So, I am feeling that I need to somehow to either use a different version of a file (if such is present somewhere) or get Angular to transpile the file or do something completely different.

Could you, please, help me make my app run in the IE11 by suggesting the steps I could undertake to fix the described above issue?

Also, I just have checked that Chrome gots the same code (I mean the class... in the 224520 line of the vendor.js). And it works just fine. I believe that is because Chrome is supporting the class keyword.

Upvotes: 0

Views: 3748

Answers (2)

macieqqq
macieqqq

Reputation: 373

I get a similar issue when I used directly SelectedEvent from :

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

I made a mistake because IE 11 does not support es2015

I should use objects from different path:

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

or to make angular choose the version automatically you should choose.

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

Please check if you have used the proper es version.

Upvotes: 1

Zhi Lv
Zhi Lv

Reputation: 21381

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

In the angular application, if we want to define a class, we could create a model 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, for the Angular application, if the Angular version below or equals Angular 7, please check the polyfill.ts file, make sure you have uncomment the related polyfills for IE browser, like this:

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

If you are using angular 8+, please check this link to configure the application to run es5 mode.

Upvotes: 1

Related Questions