title: What is the right way to integrate polyfills to make Angular compatible with Internet Explorer?
body: <p>I develop a client-side graphical interface with Angular. Users of the application must be able to view the graphical interface from <strong>Internet Explorer</strong>. The problem is that Internet Explorer doesn't display anything, just a <strong>blank page</strong>. 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?</p>
  
  <p>I work with <strong>Angular 8</strong>, <strong>NodeJS v10.15.3</strong> and my Angular application implements some <strong>web components</strong> and the <strong>Angular router</strong>. 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:</p>
  
  <p><a href="https://stackoverflow.com/questions/46657410/angular-app-empty-page-in-ie-but-works-in-chrome">Angular App Empty Page in IE but works in Chrome</a></p>
  
  <p><a href="https://blog.angularindepth.com/angular-and-internet-explorer-5e59bb6fb4e9" rel="nofollow noreferrer">https://blog.angularindepth.com/angular-and-internet-explorer-5e59bb6fb4e9</a></p>
  
  <p><a href="https://stackoverflow.com/questions/55282982/ie11-empty-page-using-angular-7">IE11 empty page using Angular 7</a></p>
  
  <p><a href="https://angular.io/guide/browser-support#suggested-polyfills" rel="nofollow noreferrer">https://angular.io/guide/browser-support#suggested-polyfills</a></p>
  
  <p>So, my polyfills.ts file looks like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>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';
  </code></pre>
  
  <p>I expected Internet Explorer to display my content but... no.</p>
  
  <p>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:</p>
  
  <p><a href="https://1drv.ms/f/s!ArJSYka9gM27oknTCiu7v0UohOFb" rel="nofollow noreferrer">https://1drv.ms/f/s!ArJSYka9gM27oknTCiu7v0UohOFb</a></p>
  
  <p>I also tried with "polyfills.io" API but it wasn't really conclusive.</p>
  
  <p>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.</p>