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 both issues can be solved relatively easy.

Step 1: Adding polyfills for IE11

The Angular CLI has created a file polyfills.ts in the src directory of your project. That file contains all the code required to help IE11 with executing some javascript functions that it does not support natively. These lines are just commented out. So to support Internet Explorer, remove the comments from the lines that are indicated as required for IE11. The result will look like:

...
/** 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';
              
/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';

...

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

npm install --save classlist.js

Step 2: Transpiling generated Javascript bundles

This step is only for Angular CLI projects. If you build your Angular app with Webpack or Rollup a better approach is to configure the build to only transpile the @material/* packages. Have a look at the webpack.config.js file of this demo website for inspiration (search for babelLoader in the file).

Add the @blox/utils package as developer dependency to your project:

npm install --save-dev @blox/utils

Now open your package.json and edit the scripts section to customize the start and build scripts, and add a transpile script:

{
    ...
    "scripts": [
        ...
        "transpile": "transpile --dir dist/NAME-OF-PROJECT --verbose --browsers ignore",
        "build": "ng build --prod && npm run transpile",
        ...
    ],
    ...
}

From now on make sure to always use the following command to create a production distribution of your application (instead of ng build --prod):

npm run build

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!