One of the questions I often get asked when teaching an Angular course is "why is my demo application not working with Internet Explorer?". This is really good question. A lot of customers, certainly in the enterprise world, are still using Internet Explorer. We still need to support
One of the questions I often get asked when teaching an Angular course is "why is my demo application not working with Internet Explorer?". This is really good question. A lot of customers, certainly in the enterprise world, are still using Internet Explorer. We still need to support those customers. Now, why I am telling you this? Because when you create a new application with Angular CLI and run it in Internet Explorer 11 you will get the following error message.
This is not really the result we were hoping for. We were expecting to see a running application. Now, the reason we are getting this error is that Internet Explorer 11 doesn't support the new ES2015 Object static methods. Here is a great tip: if you want to check which ECMAScript is supported in which browser, checkout this ECMAScript compatibility table https://kangax.github.io/compat-table/es6/. The table contains different versions of different browsers and which ECMAScript features they support.
This problem can be solved by using a polyfill. A polyfill is a piece of code that is used when the browser is not supporting a certain feature. In this case, Internet Explorer 11 is not supporting all the static methods of Object. For reference Internet Explorer 11 only supports the setPrototypeOf method.
Now how do we solve this problem? If we are going to use an Angular CLI generated application we surely need to have support for Internet Explorer. Well when you look at your project structure you will see the following file:
In our project structure there is a file called polyfills.ts. The ts extension stands for Typescript, which is the default language for writing Angular applications. Now when we open this file we will see a whole bunch of lines in comment.
When you want to use a certain a polyfill, you need to uncomment the line of the polyfill. That's all you need to do. For your application to work in Internet Explorer 11 you will need to uncomment all the lines until 'core-js/es6/set'. That's all you will need to do. I hope you enjoyed this post.