1

you have probably heard of this problem way too often. But I can't seem to find the solution for this. Every time I server the app and start it on IE I get a syntax error in the vendor.js pointing to an arrow function.

I have gone through following steps:

  • changed the target in my tsconfig to es5
  • in the browserlist I changed not IE 9-11 to IE 9-11
  • In the polyfill.js uncommented all core-js imports and added the classlist.js import and even installed the package

After all the steps I still get the same issue. It seems only the polyfill.js file is being transpiled to a polyfill-es5.js file and I don't know why.

I have an Angular application with following setup:

@angular-devkit/architect           0.801.3
@angular-devkit/build-angular       0.801.3
@angular-devkit/build-optimizer     0.801.3
@angular-devkit/build-webpack       0.801.3
@angular-devkit/core                8.1.3
@angular-devkit/schematics          8.1.0
@angular/animations                 8.1.0
@angular/cdk                        8.2.3
@angular/cli                        8.1.0
@angular/common                     8.1.0
@angular/compiler                   8.1.0
@angular/compiler-cli               8.1.0
@angular/forms                      8.1.0
@angular/platform-browser           8.1.0
@angular/platform-browser-dynamic   8.1.0
@angular/platform-server            8.1.0
@angular/router                     8.1.0
@ngtools/webpack                    8.1.3
@schematics/angular                 8.1.0
@schematics/update                  0.801.0
ng-packagr                          5.7.1
rxjs                                6.5.3
typescript                          3.4.5
webpack                             4.35.2

Any ideas on this?

best regards,

Nuru

EDIT: This is how my polyfills.ts looks like:

import 'core-js/';
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/es7/array';
import 'core-js/fn/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';
import 'core-js/es6/reflect';

import 'classlist.js';
import 'intl';
import 'web-animations-js';


import 'zone.js/dist/zone';

Additionally I've also tryed to install and import typedarray and blobjs

And my dependencies:

"dependencies": {
    "@angular/animations": "8.1.0",
    "@angular/cdk": "^8.0.2",
    "@angular/common": "8.1.0",
    "@angular/core": "^8.1.0",
    "@angular/forms": "8.1.0",
    "@angular/platform-browser": "8.1.0",
    "@angular/platform-browser-dynamic": "8.1.0",
    "@angular/platform-server": "8.1.0",
    "@angular/router": "8.1.0",
    "@ng-bootstrap/ng-bootstrap": "^4.0.1",
    "@ng-select/ng-select": "^2.11.2",
    "@ngrx/core": "^1.2.0",
    "@ngrx/store": "^8.0.1",
    "@ngx-translate/core": "^10.0.2",
    "@ngx-translate/http-loader": "^3.0.1",
    "angular2-tinymce": "^2.1.2",
    "balloon-css": "^0.5.0",
    "bcryptjs": "^2.4.3",
    "chart.js": "^2.7.1",
    "core-js": "^2.5.1",
    "favico.js": "^0.3.10",
    "lazysizes": "^5.1.1",
    "linkify-it": "^2.1.0",
    "mapbox.js": "^3.1.1",
    "md5": "^2.2.1",
    "moment": "^2.24.0",
    "mousetrap": "^1.6.2",
    "ng-pick-datetime": "^7.0.0",
    "ng-pick-datetime-moment": "^1.0.8",
    "ng2-dragula": "^2.1.1",
    "ngx-bowser": "^0.1.0",
    "ngx-device-detector": "^1.3.5",
    "ngx-image-cropper": "^1.4.1",
    "ngx-infinite-scroll": "^6.0.1",
    "ngx-moment": "^3.3.0",
    "ngx-pipes": "^2.5.1",
    "papaparse": "^4.6.3",
    "push.js": "^1.0.4",
    "resumablejs": "^1.0.2",
    "rxjs": "^6.5.2",
    "socket.io-client": "^2.1.1",
    "text-encoding": "^0.6.4",
    "twemoji": "^11.0.0",
    "zone.js": "~0.9.1"
  },
Nurullah Yel
  • 73
  • 9
  • 1
    What error messages are you getting? It could be a simple module issue. – Winnemucca Nov 13 '19 at 11:34
  • @Winnemucca it just says "Syntaxfehler" which is german for syntax error – Nurullah Yel Nov 13 '19 at 11:57
  • I was facing the same issue: I ended up fixing this by importing the offending script globally through angular.json. For whatever reason, one of my 3rd party scripts was getting compiled incorrectly if I imported using the import statement. Now I import it globally and it's working fine. – s sharif Nov 13 '19 at 12:26
  • okay I will try to find the 3rd party script what do you mean by "import it globally"? In the head of the index.html? – Nurullah Yel Nov 13 '19 at 12:29

2 Answers2

0

Under the folder src there is a file called polyfills.ts. Did you look at this file and install the dependencies required for IE support and uncomment the lines?

https://angular.io/guide/browser-support

Adrian Brand
  • 20,384
  • 4
  • 39
  • 60
  • I'll add a screenshot of my polyfill – Nurullah Yel Nov 13 '19 at 11:47
  • 1
    If you've got an error in the vendor.js it may comes from a third party library that is not compatible with IE11 – Michael Desigaud Nov 13 '19 at 11:51
  • I don't think so, because a month ago the application worked on IE11. We did not update or install any dependencies since then. But I am not entirely sure cause I just inherited the app from another dev. I will provide the dependencies too, maybe someone sees a package that may cause an issue. And I will go through them too. – Nurullah Yel Nov 13 '19 at 11:57
  • Could a dev-dependency cause issues too? I don't think so or am I wrong? – Nurullah Yel Nov 13 '19 at 11:58
0

Please refer to this thread to config ES5 in angular 8 application polyfill. Then, run the serve with this configuration using the below command:

    ng serve --configuration es5

About the arrow function issue, please try to use the babel translate the related code to ES5.

Zhi Lv
  • 18,845
  • 1
  • 19
  • 30
  • Okay I have tried that thread too. It was one of the first things while I was searchign for a solution. But the babel tip is new. That would be a workaround but not a real solution if it worked. – Nurullah Yel Nov 13 '19 at 12:36