CODEWITHSUNDEEP
angularinternet-explorer
Norbert Bartko
Norbert Bartko

Reputation: 2632

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

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

Upvotes: 0

Views: 931

Answers (1)

Sebastian
Sebastian

Reputation: 868

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 :/

Upvotes: 1

Related Questions