Why Angular WebPart 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!!

4 Comments

Join the conversation! Your thoughts help the community grow.

Vikas Mishra7y ago
Hi Kaviya, We have SharePoint project in which created some web-parts based on angular and webparts are not loading in IE but its working fine in other browsers like Chrome and mozilla ....Could you please suggest some solution so it work on IE as well . (Initially it was working on IE also but suddenly stopped working on IE ..we are unable to get its root cause ) PS : React webpart in same project working fine.
Vikas Mishra7y ago
Hi Kaviya , In my solution i am not able to see pollyfills.ts file if its not how can i add in my existing solution ...pls suggest.
Naresh Singhal8y ago
Fantastic..... Kaviya Balasubramanian .....Keep it on........
- Kaviya Balasubramanian8y ago
  Thank you naresh singhal