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 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 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
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!