1

I develop a client-side graphical interface with Angular. Users of the application must be able to view the graphical interface from Internet Explorer. The problem is that Internet Explorer doesn't display anything, just a blank page. Other browsers correctly display the Angular application. I know I have to use polyfills to do this but all my attempts with the polyfills have failed. So, what is the right way to do it?

I work with Angular 8, NodeJS v10.15.3 and my Angular application implements some web components and the Angular router. I did some research on the subject and by cross-checking the different information I found I was able to write the polyfills.ts file which seems to me to be quite correct according to the following:

Angular App Empty Page in IE but works in Chrome

https://blog.angularindepth.com/angular-and-internet-explorer-5e59bb6fb4e9

IE11 empty page using Angular 7

https://angular.io/guide/browser-support#suggested-polyfills

So, my polyfills.ts file looks like this:

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

import 'classlist.js';

import 'core-js/es6/reflect';

import 'core-js/es7/reflect';
import 'core-js/es7/array';

import 'web-animations-js';

import 'zone.js/dist/zone';

/* for web components */
import '@webcomponents/custom-elements/src/native-shim';
import '@webcomponents/custom-elements/custom-elements.min';

I expected Internet Explorer to display my content but... no.

Before I add polyfills I've got a blank page. After I've got a blank page but this time with errors inside the console which are not errors:

https://1drv.ms/f/s!ArJSYka9gM27oknTCiu7v0UohOFb

I also tried with "polyfills.io" API but it wasn't really conclusive.

I certainly must have forgotten something in the configurations or the polyfills just don't work? Anyway, I'm stuck for the moment and I hope some of you can help me. Thank you in advance for your feedback, have a good day.

Syxmoke
  • 45
  • 1
  • 5
  • Try to run your app with --prod flag or like ng serve --live-reload false It may help to run the app in IE. Ref: https://github.com/angular/angular-cli/issues/9508 – Deepak-MSFT Jun 05 '19 at 13:50
  • @Deepak-MSFT it doesn't change anything, always a blank page with the same errors (both flags). – Syxmoke Jun 05 '19 at 14:01
  • 1
    Please check your tsconfig.json file and ensure that target is set to ES5 and not to ES6. Also ensure that you had referenced shim.min.js in your index.html file. – Deepak-MSFT Jun 05 '19 at 14:19
  • @Deepak-MSFT Thanks ! I just change es2015 to es5 and now IE displays my app. Is there a good way to reference shim.min.js inside index.html file ? Because put "../node_modules/@webcomponents/custom-elements/src/shim.min" inside a script tag seems to me a strange way. – Syxmoke Jun 05 '19 at 14:46
  • From your last comment, It looks like your issue is solved. I suggest you to mark the helpful suggestion as an answer for this question may help other community members in future in similar issues. thanks for your understanding. – Deepak-MSFT Jun 05 '19 at 14:59

1 Answers1

1

Please check your tsconfig.json file and ensure that target is set to ES5 and not to ES6. Also ensure that you had referenced shim.min.js in your index.html file.

about shim.min.js, I also got the same way to reference it.

Deepak-MSFT
  • 10,379
  • 1
  • 12
  • 19