Blox Material v1.0.0-beta.3

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 since Angular CLI 9 it has become a lot easier to configure your angular app for IE11. However this will only work for (production) builds. The ng serve command does not offer a configuration options to transpile library dependencies to ES5 on demand. Since the material-web-components library is currently only distributed in ES6 javascript, ng serve will not work for IE11.

For (production) builds, supporting IE11 is made super easy though, with the default differential loading that Angular CLI supports.

Step 1: Edit browserslist

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

...
last 2 versions
not dead
IE 11
...

Now when you run ng serve, the generated application will contain javascript for both es2015 and es5 browsers. The html is generated so that browsers will only load the versions they need (and support).

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:

...
/** IE10 and 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!