Building for IE11

When targeting Internet Explorer 11 in a Blox Material application built with Angular CLI there are two issues:

1. Angular CLI by default targets modern evergreen browsers. IE11 is not that modern anymore.
2. Material Web Components are distributed as ES6 javascript. IE11 only supports ES5 javascript.

Luckily with only a few tweaks, it's possible to also support IE11!

Step 1: Edit browserslist

Angular CLI has created a file .browserslistrc in the root directory of your project. Just make sure that the list of supported browsers includes IE:

last 1 Chrome version
...
IE 11
...

Now when you run ng build, the generated application will contain javascript for both es2015 and es5 browsers. The angular CLI just creates an extra bundle by transpiling the es2015 code to es5 javascript. The html is generated so that browsers will only load the versions they need (and support). This is called Differential Loading. For more information check out: https://angular.io/guide/deployment#differential-loading

Step 2: Edit polyfills.ts

Angular CLI has created a file polyfills.ts in the src directory of your project. For classlist support on SVG, you will have to uncomment the line that imports classlist.js. The result will look like:

...
/** IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js';  // Run 'npm install --save classlist.js'.
...

Also, as instructed for the classlist.js polyfill, run:

npm install --save classlist.js

Congratulations! You now have your Angular application fully integrated with Blox Material, optimized and working for any browser supported by Angular. Now head to the components documentation for code samples and instructions on how to use all Material components in your app!

The steps in this guide help in creating a production build of your application that is compatible with IE11. Local development (by executing ng serve) will still not work with IE11, since it doesn't use differential loading. Check out https://angular.io/guide/deployment#local-development-in-older-browsers for ways to use IE11 during local development, debugging, and testing of your application.