Introduction

In this short post, I will show How To Fix Your Angular App To Make it work in IE11.

In Angular CLI version 8 and higher, applications are built using differential loading, a strategy where the CLI builds two separate bundles as part of your deployed application.

• The first bundle contains modern ES2015 syntax, takes advantage of built-in support in modern browsers, ships less polyfills, and results in a smaller bundle size.
• The second bundle contains code in the old ES5 syntax, along with all necessary polyfills. This results in a larger bundle size, but supports older browsers

Problem Statement

After Angular version 2, many things have changed. You app with version 2 or 4 might have worked in IE and when you upgraded your app to 6 or 8 then the IE stopped working. You might have come across many website stating this is because of Polyfills. That's not the case always

Polyfills

Angular is built on the latest standards of the web platform. Targeting such a wide range of browsers is challenging because they do not support all features of modern browsers. You compensate by loading polyfill scripts ("polyfills") for the browsers that you must support.

Angular.IO

Read about browser-support

So for specific use case, Polyfill might work. However, for supporting IE, you need two change to your configuration. Let's see what are those to make this IE work both when debugging and after deploying to production.

Solution

Add a property  "es5BrowserSupport": true in angular.json file

Now, change your target as "es5" in tsconfig.json file

Also see other common issues encountered by developers.

Entity Framework Core dbcontextoptionsbuilder does not contain a definition for usesqlserver – Solved

Conclusion

Thanks for reading this piece. As you can see, to support IE 11, you need to add es5BrowserSupport property in angular.json file and change the target as es5 in tsconfig.json file that solved the problem. Let me know in the comments if you have questions.