How do I support Internet Explorer in an Angular 8 application?

Question

When I generate a project with Angular CLI (8.0.0), I run ng serve, open the application up in Internet Explorer and I am presented with a blank screen.

I had a look at the polyfills.ts files and I uncommented the following lines:

    import 'classlist.js';     import 'web-animations-js'; 

I've also removed all core.js imports as Angular 8 supports core.js 3.0 directly.

I've also ran npm i.

package.json:

"dependencies": {     "@angular/animations": "~8.0.0",     "@angular/common": "~8.0.0",     "@angular/compiler": "~8.0.0",     "@angular/core": "~8.0.0",     "@angular/forms": "~8.0.0",     "@angular/platform-browser": "~8.0.0",     "@angular/platform-browser-dynamic": "~8.0.0",     "@angular/router": "~8.0.0",     "classlist.js": "^1.1.20150312",     "rxjs": "~6.4.0",     "tslib": "^1.9.0",     "web-animations-js": "^2.3.1",     "zone.js": "~0.9.1"   },   "devDependencies": {     "@angular-devkit/build-angular": "~0.800.0",     "@angular/cli": "~8.0.0",     "@angular/compiler-cli": "~8.0.0",     "@angular/language-service": "~8.0.0",     "@types/node": "~8.9.4",     "@types/jasmine": "~3.3.8",     "@types/jasminewd2": "~2.0.3",     "codelyzer": "^5.0.0",     "jasmine-core": "~3.4.0",     "jasmine-spec-reporter": "~4.2.1",     "karma": "~4.1.0",     "karma-chrome-launcher": "~2.2.0",     "karma-coverage-istanbul-reporter": "~2.0.1",     "karma-jasmine": "~2.0.1",     "karma-jasmine-html-reporter": "^1.4.0",     "protractor": "~5.4.0",     "ts-node": "~7.0.0",     "tslint": "~5.15.0",     "typescript": "~3.4.3"   } 

tsconfig.json:

{   "compileOnSave": false,   "compilerOptions": {     "baseUrl": "./",     "outDir": "./dist/out-tsc",     "sourceMap": true,     "declaration": false,     "module": "esnext",     "moduleResolution": "node",     "emitDecoratorMetadata": true,     "experimentalDecorators": true,     "importHelpers": true,     "target": "es2015",     "typeRoots": [       "node_modules/@types"     ],     "lib": [       "es2018",       "dom"     ]   } } 

EDIT:

browserlists:

# This file is used by the build system to adjust CSS and JS output to support the specified browsers below. # For additional information regarding the format and rule options, please see: # https://github.com/browserslist/browserslist#queries  # You can see what browsers were selected by your queries by running: #   npx browserslist  > 0.5% last 2 versions Firefox ESR not dead IE 9-11 # For IE 9-11 support, remove 'not'. 

EDIT 2:

The console in Internet Explorer (11) shows the following errors:

polyfills.js: Syntax error (3168, 5) (line 3168 beginning) -> class Zone {

vendor.js: Syntax error (156, 1) (line 156 beginning) -> class PlatformLocation {

main.ts: Syntax error (95, 20) (points to the AppComponent)

What else do I need to do?

Answer 1

According to this issue reply

You need to follow the following steps

1. Create a new tsconfig tsconfig.es5.json next to tsconfig.json with the below contents

{  "extends": "./tsconfig.json",  "compilerOptions": {      "target": "es5"    } } 

2. In angular.json Under projects:yourAppName:architect:build:configurations, add

"es5": {       "tsConfig": "./tsconfig.es5.json"     } 

and projects:yourAppName:architect:serve:configurations add

    "es5": {       "browserTarget": "yourAppName:build:es5"     } 

Remember to change yourAppName in app:build:es5 to yourAppName!

full path shown below

"build": {   "builder": "@angular-devkit/build-angular:browser",   "options": {       ...   },   "configurations": {     "production": {         ...     },     "es5": {       "tsConfig": "./tsconfig.es5.json"     }   } }, "serve": {   "builder": "@angular-devkit/build-angular:dev-server",   "options": {       ...   },   "configurations": {     "production": {      ...     },     "es5": {       "browserTarget": "yourAppName:build:es5"     }   } }, 

3. Run the serve with this configuration using the below command.

ng serve --configuration es5 

Answer 2

Go to "tsconfig.json" and use target: "es5" instead of "target": "es2015",

target which is inside compileOnSave\compilerOptions