Angular 8 is not loading in IE 11 Browser

It is a duplicate question from How do I support Internet Explorer in an Angular 8 application? But I really wondering why none of the solution is not working for me including nested forum sites solutions too.Here are my snippets FYI.have tried a lot and being spending two days for this before posting here. curious to know what i missed and what will be the solution. much appreciated if get the expected solution.

package.json

 "dependencies": {
    "@angular/animations": "^8.2.3",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "~8.0.3",
    "@angular/compiler": "~8.0.3",
    "@angular/core": "~8.0.3",
    "@angular/forms": "~8.0.3",
    "@angular/platform-browser": "~8.0.3",
    "@angular/platform-browser-dynamic": "~8.0.3",
    "@angular/router": "~8.0.3",
    "@ng-idle/core": "^8.0.0-beta.4",
    "@ng-idle/keepalive": "^8.0.0-beta.4",
    "@ngrx/effects": "^8.6.0",
    "@ngrx/router-store": "^8.6.0",
    "@ngrx/store": "^8.6.0",
    "@ngrx/store-devtools": "^8.6.0",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "@types/lodash-es": "^4.17.3",
    "classlist.js": "^1.1.20150312",
    "core-js": "^3.6.5",
    "express": "^4.17.1",
    "highcharts": "^8.0.4",
    "highcharts-angular": "^2.4.0",
    "lodash-es": "^4.17.15",
    "moment": "^2.26.0",
    "ngx-device-detector": "^1.4.6",
    "roboto-fontface": "^0.10.0",
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.9.1"
},
"devDependencies": {
    "@angular-devkit/build-angular": "~0.800.6",
    "@angular/cli": "^8.3.22",
    "@angular/compiler-cli": "~8.0.3",
    "@angular/language-service": "~8.0.3",
    "@commitlint/cli": "^8.3.4",
    "@commitlint/config-conventional": "^8.3.4",
    "@types/express": "^4.17.2",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^14.10.2",
    "codelyzer": "^5.2.1",
    "jasmine-core": "~3.4.0",
    "jasmine-marbles": "^0.6.0",
    "jasmine-spec-reporter": "~4.2.1",
    "pretty-quick": "^2.0.1",
    "protractor": "~5.4.0",
    "sonarqube-scanner": "^2.5.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3",
    "yorkie": "^2.0.0",
    "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.5.1",
    "karma-spec-reporter": "0.0.32"
}

index.html

 <!-- End Google Tag Manager (noscript) -->
    <app-root></app-root>
    <script src="runtime-es2015.js" type="module"></script>
    <script src="runtime-es5.js" nomodule></script>
    <script src="polyfills-es2015.js" type="module"></script>
    <script src="polyfills-es5.js" nomodule></script>
    <script src="styles-es2015.js" type="module"></script>
    <script src="styles-es5.js" nomodule></script>
    <script src="vendor-es2015.js" type="module"></script>
    <script src="vendor-es5.js" nomodule></script>
    <script src="main-es2015.js" type="module"></script>
    <script src="main-es5.js" nomodule></script>
</body>

tsconfig.json

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

tsconfig-es5.app.json

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

angular.json

  "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": "<app-name>:build:es5"
    }
  }
},

browserlist

# 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'.

polyfills.ts

import 'classlist.js';
import 'core-js/es/array';
import 'core-js/es/date';
import 'core-js/es/function';
import 'core-js/es/map';
import 'core-js/es/math';
import 'core-js/es/number';
import 'core-js/es/object';
import 'core-js/es/parse-float';
import 'core-js/es/parse-int';
import 'core-js/es/reflect';
import 'core-js/es/regexp';
import 'core-js/es/set';
import 'core-js/es/string';
import 'core-js/es/symbol';
import 'core-js/es/weak-map';
import 'web-animations-js';
import 'zone.js/dist/zone';

Here are referred sites including angular docs.please do not suggest the same again. expecting beyond all.

https://github.com/browserslist/browserslist#browserslistrc
https://angular.io/guide/browser-support#polyfills
https://blog.ninja-squad.com/2019/01/31/angular-cli-7.3/
https://karthiktechblog.com/angular/how-to-fix-your-angular-app-to-make-it-work-in-ie11
https://github.com/angular/angular-cli/issues/14455
https://medium.com/better-programming/how-to-fix-your-angular-app-when-its-not-working-in-ie11-eb24cb6d9920
https://dev.to/paulinhapenedo/angular-8-and-ie-11-1ed2
https://www.blexin.com/en-US/Article/Blog/How-to-support-Internet-Explorer-in-Angular-8-49

Recommended topics

Hot tags