Angular 8 build does not work with IE though serve works fine

Question

im tried to build my angular 8 app for ie, but it does not work.

I followed several tutorials and workarounds how to "fix it".
Sadly it only works for ng serve and not for ng buld / ng build --prod.

Sources that I have used:

Note that this only solve it for dev server: ng server and not for production build

Now i'm not sure what the problem is or where to look further.

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": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

tsconfig.es5.json

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

angular.json

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

browserlist

> 0.5%
last 2 versions
Firefox ESR
not dead
IE 9-11 # For IE 9-11 support, remove 'not'.

For every one who want a minimal, reproducible example, when i just create a clean new project with Angular Cli 8.3.9 and Angular: 8.2.11 like this

I get the following output in chrome 77 and internet explorer 11

Note when i run ng server it also runs in ie 11

what is your error? Do you follow Angular.io browser support guide (https://angular.io/guide/browser-support)? What configuration do you use? — ForestG, Oct 15 '19 at 14:45
I think the most helpful thing is if you share your error message that you get telling you that it doesn't work. It would also be helpful if you share your tsconfig and angular.json files. — Damian C, Oct 15 '19 at 14:50
There is no error, after `ng build` the screen is blank (only on ie). — Norbert Bartko, Oct 15 '19 at 15:09
so you built your app uploaded to a server loaded it in chrome and ffox and it was ok but then you tried explorer and the screen was blank? — GaryB, Oct 15 '19 at 15:17
Are you sure the es5 tsconfig is still relevant? Mine works in IE and modern browsers and creates both es2105 and es5 bundles on build — Damian C, Oct 15 '19 at 15:36
IE has several "very specific" bugs. It's a big pain to debug application in IE. It's like a lottery. First - try to check `aot` flags in your `angular.json`. Probably you have different `aot` configuration in `serve` and `build`. — vadjs, Oct 15 '19 at 16:25
Differential loading is enabled by default in Angular 8 for `ng build`. When running a production build, you'll get two kinds of bundles: one for modern browsers and one for legacy browsers like IE 11. Are you using the right bundle for IE 11? You could check the **Differential Loading of Polyfills** in [this article](https://medium.com/better-programming/how-to-fix-your-angular-app-when-its-not-working-in-ie11-eb24cb6d9920). If the issue still persists, you could provide [a minimal, reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) so that we can test it. — Yu Zhou, Oct 16 '19 at 07:14

score 1 · Answer 1 · answered Jan 21 '20 at 12:43

i have a simmilar issue.

in my case IE 11 complains:

SCRIPT1002: Syntax error in scripts.22d9f1b41174f0698a97.js (1,221172) - pointing to class s{constructor(t,e,n,i)...

it looks like the minifier creates incompatible IE JS code, my set up is:

browserlist:

> 0.5%
last 2 versions
Firefox ESR
dead
IE 9-11 # For IE 9-11 support, remove 'not'.

tsconfig:

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

env:

Angular CLI: 8.3.23
Node: 10.9.0
OS: win32 x64
Angular: 8.2.14

i also tried with target: 2015 (and differential loading) but it generated even more errors :/

Angular 8 build does not work with IE though serve works fine

1 Answers1

Linked