I need to make my Angular project work on both IE11 and Edge, but a very simple hello world is not even showing in these two browsers.
Here's what I did:
$npm -v
6.10.2
$ng v
Angular CLI: 8.1.3
Node: 10.15.1
OS: win32 x64
Angular: 8.1.3
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.801.3
@angular-devkit/build-angular 0.801.3
@angular-devkit/build-optimizer 0.801.3
@angular-devkit/build-webpack 0.801.3
@angular-devkit/core 8.1.3
@angular-devkit/schematics 8.1.3
@ngtools/webpack 8.1.3
@schematics/angular 8.1.3
@schematics/update 0.801.3
rxjs 6.4.0
typescript 3.4.5
webpack 4.35.2
ng new ie-test
npm install --save classlist.js
npm install --save web-animations-js
import 'classlist.js'; // Run `npm install --save classlist.js`.
import 'web-animations-js'; // Run `npm install --save web-animations-js`.
Works on Chrome and Firefox, but not in IE11 or Edge.
When I checked the console in the developer tools, I've found that the app-root tag is completely empty! And no errors are showing up.
Am I missing something?
Edge black and no error:
Edge empty app-root:
Chrome works fine:
When I deploy the app in tomcat it works (after building it with ng build --base-href=/ietest/
).
But still not working with ng serve
By default, Angular compiles ES6 or ES7. IE 11 only supports ES5.
There can be numerous reasons why your Angular application is not working, including: Missing polyfills in polyfills. ts . Using a TypeScript target version which IE11 does not support.
By default in angular version 8, differential loading for ng build
is enabled. However for ng test
and ng serve
, it only generates a single ES2015 build which cannot run in IE11.
There're two ways to have ES5 code during serve which make angular 8 app work in IE11.
Disable differential loading completely. (Not recommended)
You can turn differential loading off by changing the target from "es2015" to "es5" in your tsconfig.json.
Have multiple configurations for serve.
Create a new tsconfig tsconfig-es5.app.json next to tsconfig.app.json with the below contents:
{
"extends": "./tsconfig.app.json",
"compilerOptions": {
"target": "es5"
}
}
In your angular.json add two new configuration section (es5 node) under the build and serve target to provide a new tsconfig.
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
...
},
"configurations": {
"production": {
...
},
"es5": {
"tsConfig": "./tsconfig-es5.app.json"
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
...
},
"configurations": {
"production": {
...
},
"es5": {
"browserTarget": "<your application name>:build:es5"
}
}
},
You can then run the serve with this configuration using the below command:
ng serve --configuration es5
Besides, the browserslist file content as below:
> 0.5%
last 2 versions
Firefox ESR
not dead
IE 9-11 # For IE 9-11 support, remove 'not'.
You don't have to touch the polyfills directly anymore with Angular 8. There is a browserslist
file inside the root directory of your Angular project. There you can specify which browser should be supported and which are not. You can check your browser with
npx browserslist
For example you can add
ie 6-8
to support Internet Explorer version 6 to 8. You can find a detailed list with all options here. This automatically imports the required polyfills and it also separates between modern and legacy browsers to ship only the necessary code, which is called Differential Loading. As a result you have es2015 and es5 bundles in your ./dist folder.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With