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
