angular-cli: IE11 error when build with production option

🐞 Bug report

Command (mark with an `x`)

- [ ] new
- [x ] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Is this a regression?

The previous version in which this bug was not present was: 7

Description

When I build the project in production mode using following command: ng build --prod --aot --output-hashing=all there is an error in IE11 console and the app do not work properly.

The error is not present if I remove the --prod option as follow: ng build --aot --output-hashing=all

🔥 Exception or Error

In the Internet Explorer 11 console:


SCRIPT5011: Can't execute code from a freed script
polyfills-es5.f3ff03881ba246940c55.js (1,35470)

SCRIPT1003: Expected ':'
scripts.8ceca2752ba5a816c267.js (1,156849)

🌍 Your Environment

ng version



    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 8.0.3
Node: 11.15.0
OS: linux x64
Angular: 8.0.1
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.3
@angular-devkit/build-angular     0.800.3
@angular-devkit/build-optimizer   0.800.3
@angular-devkit/build-webpack     0.800.3
@angular-devkit/core              8.0.3
@angular-devkit/schematics        8.0.3
@angular/cli                      8.0.3
@ngtools/webpack                  8.0.3
@schematics/angular               8.0.3
@schematics/update                0.800.3
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.30.0

package.json


{
  "name": "webclient",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^8.0.1",
    "@angular/cdk": "^8.0.1",
    "@angular/common": "^8.0.1",
    "@angular/compiler": "^8.0.1",
    "@angular/core": "^8.0.1",
    "@angular/forms": "^8.0.1",
    "@angular/platform-browser": "^8.0.1",
    "@angular/platform-browser-dynamic": "^8.0.1",
    "@angular/platform-server": "^8.0.1",
    "@angular/router": "^8.0.1",
    "@ng-idle/core": "^7.0.0-beta.1",
    "@ng-idle/keepalive": "^7.0.0-beta.1",
    "@types/sprintf-js": "^1.1.2",
    "bootstrap": "^4.3.1",
    "chart.js": "^2.8.0",
    "core-js": "^2.5.4",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "jquery": "^3.4.1",
    "moment": "^2.24.0",
    "ngx-device-detector": "^1.3.6",
    "popper.js": "^1.15.0",
    "primeicons": "^1.0.0",
    "primeng": "^8.0.0-rc.1",
    "quill": "^1.3.6",
    "rxjs": "~6.5.2",
    "sprintf-js": "^1.1.2",
    "tslib": "^1.9.0",
    "videogular2": "^6.4.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.800.3",
    "@angular/cli": "^8.0.3",
    "@angular/compiler-cli": "^8.0.1",
    "@angular/language-service": "~8.0.1",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "^3.4.5"
  }
}

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 2
Comments: 23 (5 by maintainers)

Commits related to this issue

fix(@angular-devkit/build-angular): IE11 errors when using scripts and differential loading Invert the builds so that es2015 scripts output don't override the es5 version. Fixes #14777 — committed to angular/angular-cli by alan-agius4 5 years ago

Most upvoted comments

The root problem is that we scripts don’t get a unique filename for every build ie, we don’t generate scripts-es5 and scripts-es2015. Which means that the scripts es5 version will be overridden by the es2015. which causes the above mentioned issue.

There are a couple of possible solutions to this problem.

Create both ES2015 and ES5 versions of the scripts (IE: scripts-es2015 and scripts-es5 etc…)
Invert the builds instead of ES5 followed by es2015, we do ES2015 followed by es5
Only generate scripts in the ES5 when differential loading is enabled. This approach is slighly more complex but I belive it’s the best solution as it also reduce the builds times, since the benefit of having 2 scripts versions in terms of size in minimal (couple of bytes). This would also require adding ‘defer’ to the script tag since we don’t want these scripts to be executed prior to other nomodule and module scripts. Such as before polyfills-es2015.js

I am going to mark this as needs further discussion so in our next team meeting we decide which solution we want to go with, once we do that, we will post the outcome and work on the implementation.

alan-agius4 on Jun 26, 2019

I am not sure how this ticket was closed without anybody even confirming that it’s now working. I have tried this with the latest release and I still cannot get a basic “ng new my-app” to run in IE11.

It doesn’t matter if I use ng serve or ng build --prod neither results in anything that works in IE11. The only difference I can see now from before the latest 8.1.0 release is that now there are no errors appearing in the console. However, the app still does not load and I am just left with a blank white screen.

AaronMorse on Jul 3, 2019

Hi all, I have looked at this and the problem is that scripts will be minified with terser ECMA 6 which causes compatible syntax generation for IE

var r = (e[i] = { i, l: !1, exports: {} });

instead of

var r = (e[i] = { i: i, l: !1, exports: {} });

I have some ideas how to solve this, I will be exploring them in the coming days.