Building for IE11
When targeting Internet Explorer 11 in a Blox Material application built with Angular CLI there are two issues:
- Angular CLI by default targets modern evergreen browsers. IE11 is not that modern anymore.
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
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.