Angular 8 project not working in Microsoft Edge and IE11
Solution 1
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'.
Solution 2
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.
Related videos on Youtube
chimaira
Updated on June 04, 2022Comments
-
chimaira almost 2 years
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 version:
$npm -v 6.10.2
Angular version:
$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
I create a simple project
ng new ie-test
I install the needed packages as described in the polyfills.ts,
npm install --save classlist.js npm install --save web-animations-js
I uncomment the imports lines in polyfills.ts
import 'classlist.js'; // Run `npm install --save classlist.js`. import 'web-animations-js'; // Run `npm install --save web-animations-js`.
And then run the application.
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?
EDIT : Update
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
-
chimaira over 4 yearsWhen I deploy the app in tomcat it works (after building it with
ng build --base-href=/ietest/
). But still not working withng serve
-
Eddy Howard over 4 years#2 worked for me. Make sure <your application name> is correct and matches the application name used in the other "browserTarget" settings. I had one character off and it was erroring out.
-
spinner over 3 yearsBut what do you do with the legacy Edge browser, which is not considered as an ES5 browser so it gets ES2015 to download and it fails to run?