IE 11 not loading Angular 10 app after recommended fixes

Question

I've gone with the standard fix for IE11 issues with Angular 10 apps (not loading fonts, script errors for certain characters in the bundled files) -- by adding a tsconfig-es5.app.json file with a target of es5 and I've added the es5 entry in the configurations object. And the polyfills.ts is importing the classlist.js file. There's nothing I've missed. Here's my package.json file with the build and run scripts I use:

You can see that both the dev:es5 and dev:internal:es5 have configs of es5. Now here's my angular.json file build configuration:

"build": {
                "builder": "@angular-devkit/build-angular:browser",
                "options": {
                    "aot": true,
                    "outputPath": "dist/{MyContent}/",
                    "index": "src/index.html",
                    "main": "src/main.ts",
                    "polyfills": "src/polyfills.ts",
                    "tsConfig": "tsconfig.app.json",
                    "assets": ["src/favicon.ico", "src/assets"],
                    "styles": ["src/styles.scss"],
                    "scripts": []
                },
                "configurations": {
                    "production": {
                        "fileReplacements": [
                            {
                                "replace": "{myEnvDevFile}",
                                "with": "{myEnvProdFile}                               }
                        ],
                        "optimization": true,
                        "outputHashing": "none",
                        "sourceMap": false,
                        "extractCss": true,
                        "namedChunks": false,
                        "aot": true,
                        "extractLicenses": true,
                        "vendorChunk": false,
                        "buildOptimizer": true,
                        "budgets": [
                            {
                                "type": "initial",
                                "maximumWarning": "2mb",
                                "maximumError": "5mb"
                            },
                            {
                                "type": "anyComponentStyle",
                                "maximumWarning": "6kb"
                            }
                        ]
                    },
                    "es5": {
                        "budgets": [
                            {
                                "type": "anyComponentStyle",
                                "maximumWarning": "6kb"
                            }
                        ],
                        "tsConfig": "./tsconfig-es5.app.json"
                    }
                }
            }

Here's my original tsconfig.app.json file:

 {
       "extends": "./tsconfig.base.json",
        "compilerOptions": {
        "outDir": "./out-tsc/app",
       "types": []
   },
   "files": ["src/main.ts", "src/polyfills.ts"],
   "include": ["src/**/*.d.ts"]
  }

And finally the tsconfig-es5.app.json file:

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

I don't think I've missed anything at all. The Angular CLI is 10 so I think I'm good. Have I made a glaring error?

To me, I must missing a polyfill in polyfill.ts but I don't know which one. both zone.js and classlist.js are being imported.

Please don't make more work for other people by vandalizing your posts. By posting on the Stack Exchange network, you've granted a non-revocable right, under the [CC BY-SA 4.0 license](//creativecommons.org/licenses/by-sa/4.0/), for Stack Exchange to distribute that content (i.e. regardless of your future choices). By Stack Exchange policy, the non-vandalized version of the post is the one which is distributed. Thus, any vandalism will be reverted. If you want to know more about deleting a post please see: [How does deleting work?](//meta.stackexchange.com/q/5221) — Sabito stands with Ukraine, Feb 22 '21 at 17:19

Pinaki · Accepted Answer · 2021-02-11T14:50:25.280

Please follow the below steps to run Angular 10 app in IE11.

Step 1 :: Check this URL (medium.com) and do as it is mentioned. If you are lucky then your app will work on IE11, if not then follow Step 2.

Step 2 :: You may get below error in the terminal -

ERROR in ./src/polyfills.ts
Module not found: Error: Can't resolve 'core-js/es6/reflect' in '...\src'

Then you have to comment out import 'core-js/es6/reflect' and add below code in polyfills.ts -

/** Evergreen browsers require these. */
// import 'core-js/es6/reflect';

/** IE9, IE10 and IE11 requires all of the following polyfills. */
import 'core-js/es/reflect';
import 'core-js/es/symbol';
import 'core-js/es/object';
import 'core-js/es/array';
import 'core-js/es/function';
import 'core-js/es/parse-int';
import 'core-js/es/parse-float';
import 'core-js/es/number';
import 'core-js/es/math';
import 'core-js/es/string';
import 'core-js/es/date';
import 'core-js/es/regexp';
import 'core-js/es/map';
import 'core-js/es/set';

Ref URL for Step 2 - Module not found: Error: Can't resolve 'core-js/es6'

IE 11 not loading Angular 10 app after recommended fixes

1 Answers1