By default, the SPA templates support current (evergreen) web browsers only, including Edge, Chrome, Firefox, and Safari. This is standard practice for modern single-page application frameworks. Internet Explorer 11 is not supported by default because it lacks many basic modern JavaScript features.
However, developers who need IE support can add it by installing relevant polyfills. This will increase your page size, which is why they aren't already installed in newly-created applications.
Installing the core-js polyfills package
On the command-line, run:
npm install --save-dev core-js
Or equivalently, edit your package.json file to include a reference to core-js. For example, add:
"core-js": "^2.5.1",
... and then run npm install, or if you use Visual Studio, just wait for the IDE to install the package for you as soon as you save your change to package.json.
Importing polyfills
Once you've installed the core-js package, you can include its polyfills. First, locate your client-side boot file:
- For the Angular template, this is
ClientApp/boot.browser.ts - For the React template, this is
ClientApp/boot.tsx - For the React + Redux template, this is
ClientApp/boot-client.tsx
Other templates follow a similar pattern. Next, at the top of that file, add import statements to include whichever polyfill APIs you need. For example, to enable the Promise API in IE11, you could add to the very top of the file:
import 'core-js/fn/promise';
Choosing which polyfills to import
Exactly which combination of polyfills you need to import depends on which SPA framework you are using, which of its features or third-party plugins you use, and which versions of IE you wish to support. See the core-js project's documentation for a list of available polyfill APIs.
Usually it's fairly easy to determine which ones you need. Try running your application in your targeted browser, such as IE11, and look out for any errors appearing in the console. For example, if you see the error Object doesn't support property or method 'assign', then you will realise that IE11 lacks support for Object.assign, and you can fix this by adding import 'core-js/fn/object/assign';.
Polyfills needed for IE11 support in the Angular template
For IE11 support in the Angular template, you will need the following:
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';
Note: It is essential that you put these imports at the top of your boot file, above the imports for reflect-metadata or zone.js.
Polyfills needed for IE11 support in the React template
For IE11 support the React template, you will need at least the following:
import 'core-js/fn/promise';
Polyfills needed for IE11 support in the React+Redux template
For IE11 support in the React+Redux template, you will need at least the following:
import 'core-js/fn/object/assign';
import 'core-js/fn/promise';