Why Angular WebPart Is Not Loading In IE

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

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.

 

Step 2

Open the polyfills file from the left navigation.

Step 3

You can see that the following codes are commented.

/***************************************************************************************************

* BROWSER POLYFILLS

*/
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
// 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';
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js'; // Run `npm install --save classlist.js`.
/** IE10 and IE11 requires the following for the Reflect API. */
// import 'core-js/es6/reflect';

Below is the screen shot for your reference.

Step 4

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

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
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';
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js'; // Run `npm install --save classlist.js`.
/** IE10 and IE11 requires the following for the Reflect API. */
import 'core-js/es6/reflect';

Step 5

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

Step 6

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

ng build

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!!