In this blog, I would like to share the solution to why Angular web part is not loading in IE.

I’ve created a new web part for SharePoint based on the Angular framework. Using the Content Editor Web Part, I’ve added the web part to the page and referred the relevant JS file. In the Chrome browser, the web part was working perfectly but when I tested in IE, it was not loading.

Then, I came to know the reason for this, i.e., because some of the code is commented in polyfills files.

Follow the below steps and uncomment those lines and your web part will be working perfectly on the IE browser too.

Step 1

Open your Angular project using Visual Studio Code.

SharePoint

Step 2

Open the polyfills file from the left navigation.

SharePoint

Step 3

You can see that the following codes are commented.

  1. /***************************************************************************************************
  3. * BROWSER POLYFILLS
  5. */
  6. /** IE9, IE10 and IE11 requires all of the following polyfills. **/
  7. // import 'core-js/es6/symbol';
  8. // import 'core-js/es6/object';
  9. // import 'core-js/es6/function';
  10. // import 'core-js/es6/parse-int';
  11. // import 'core-js/es6/parse-float';
  12. // import 'core-js/es6/number';
  13. // import 'core-js/es6/math';
  14. // import 'core-js/es6/string';
  15. // import 'core-js/es6/date';
  16. // import 'core-js/es6/array';
  17. // import 'core-js/es6/regexp';
  18. // import 'core-js/es6/map';
  19. // import 'core-js/es6/weak-map';
  20. // import 'core-js/es6/set';
  21. /** IE10 and IE11 requires the following for NgClass support on SVG elements */
  22. // import 'classlist.js'; // Run `npm install --save classlist.js`.
  23. /** IE10 and IE11 requires the following for the Reflect API. */
  24. // import 'core-js/es6/reflect';

Below is the screen shot for your reference.

SharePoint

Step 4

Just uncomment the below codes to make it work for the IE.

  1. /** IE9, IE10 and IE11 requires all of the following polyfills. **/
  2. import 'core-js/es6/symbol';
  3. import 'core-js/es6/object';
  4. import 'core-js/es6/function';
  5. import 'core-js/es6/parse-int';
  6. import 'core-js/es6/parse-float';
  7. import 'core-js/es6/number';
  8. import 'core-js/es6/math';
  9. // import 'core-js/es6/string';
  10. import 'core-js/es6/date';
  11. import 'core-js/es6/array';
  12. import 'core-js/es6/regexp';
  13. import 'core-js/es6/map';
  14. import 'core-js/es6/weak-map';
  15. import 'core-js/es6/set';
  16. /** IE10 and IE11 requires the following for NgClass support on SVG elements */
  17. import 'classlist.js'; // Run `npm install --save classlist.js`.
  18. /** IE10 and IE11 requires the following for the Reflect API. */
  19. import 'core-js/es6/reflect';

SharePoint

Step 5

Then, run `npm install --save classlist.js at the command prompt.

SharePoint

Step 6

After you have installed the classlist.js, build the solution using the below command.

ng build

SharePoint

Finally, update the JS file in appropriate SharePoint folder. Your web part will work on the IE.

Summary

In this blog, we have explored how to avoid the "Angular web part not loading in IE" error. Happy coding!!