Search code examples
angularinternet-explorerweb-componentpolyfills

What is the right way to integrate polyfills to make Angular compatible with Internet Explorer?

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.

Solution

  • 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.