I upgraded to Angular 8 using ng update
. It ran its migration scripts which (among other things) removed the es6/es7 imports in polyfills.ts
. From what I read, Angular will create a special build for older browsers (including IE11) and I don't have to worry about polyfills anymore? I updated browserlist
to be not IE 9-10
instead of not IE 9-11
to (I presume) hint that it should build the appropriate polyfills.
Unfortunately, after running ng build
, I get some polyfill related errors, eg. Reflect.getMetadata is not a function
and Object doesn't support property or method 'includes'
. I tried putting reflect
and array
imports back into polyfills and move past those errors, but I get others. What's the deal? Am I supposed to include polyfills or not?
How do I make Angular 8 work with IE11?
One way to get IE 11 to work with Angular 8 is to disable differential loading.
Do the following:
- Update
tsconfig.json
with "target": "es5"
- Update
polyfills.ts
with import 'core-js'; // core-js@^3.1.4
If you want to serve your app to ES5 browsers like IE11 as well as modern ES2015+ browsers like Chrome and Firefox, add additional build configuration to your angular.json to serve your app's ES5 bundle.
- Add a new "es5" configuration to the
architect
section of angular.json:
{
"projects": {
"my-app": {
"architect": {
"build": {
"configurations": {
"es5" : {
"tsConfig": "tsconfig.app.es5.json"
}
}
},
"serve": {
"configurations": {
"es5": {
"browserTarget": "my-app:build:es5"
}}}}}}}
- Create
tsconfig.app.es5.json
alongside angular.json
:
{
"extends": "./tsconfig.app.json",
"compilerOptions": {
"target": "es5"
}
}
- Update
browserslist
to enable IE 11 support. Make sure browserslist is in the root directory of your app, alongside the angular.json
file. For example:
not IE 9-10 # For IE 9-11 support, remove 'not'.
IE 11
- Add a new start script to
package.json
to use the ES5 configuration you created in step 1:
"scripts": {
"build": "ng build",
"buildES5": "ng build --configuration=es5",
"start": "ng serve",
"startES5": "ng serve --configuration=es5",
}
Now you can build and serve your app for legacy browsers that only support ES5 or modern browsers that support ES2015+:
npm run build
builds your app for modern browsers
npm run buildES5
builds your app for legacy browsers
npm run start
builds and serves your app for modern browsers
npm run startES5
builds and serves your app for legacy browsers
I have solved my polyfill.ts
issues with IE 11
by doing the following:
- Run
npm install --save web-animations-js
- Uncomment line
import 'web-animations-js'
inside polyfill.ts
- Change
target
value from 'es2015' to 'es5' inside tsconfig.json
.
IE 11
requires 'es5'.