Angular-cli: IE11 error when build with production option

Created on 14 Jun 2019  ·  23Comments  ·  Source: angular/angular-cli

🐞 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"
  }
}
devkibuild-angular low regression bufix
Source
picture varolo
👍2

Most helpful comment

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.

1) Create both ES2015 and ES5 versions of the scripts (IE: scripts-es2015 and scripts-es5 etc...)
2) Invert the builds instead of ES5 followed by es2015, we do ES2015 followed by es5
3) 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.

picture alan-agius4 on 26 Jun 2019
👍2

All 23 comments

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

alan-agius4 picture alan-agius4 on 14 Jun 2019

Hi , I've uploaded app on GitHub.
https://github.com/varolo/repro-app
I omitted the node_modules folder (448mb)

Thanks!

varolo picture varolo on 14 Jun 2019

Am facing the same error when i try to open my angular app in IE 11.

image

Sathishkumar1805 picture Sathishkumar1805 on 18 Jun 2019

Hi, I want to start contributing. If nobody else is working on it, I would like to take this up.
Thanks!

viswajeetlenka9 picture viswajeetlenka9 on 18 Jun 2019

The same for me. Vendor chunk in es5 variant contains es2015 features like arrow functions, let and consts.

psmyrdek picture psmyrdek on 21 Jun 2019
👍1

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.

alan-agius4 picture alan-agius4 on 26 Jun 2019
👍1

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.

1) Create both ES2015 and ES5 versions of the scripts (IE: scripts-es2015 and scripts-es5 etc...)
2) Invert the builds instead of ES5 followed by es2015, we do ES2015 followed by es5
3) 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 picture alan-agius4 on 26 Jun 2019
👍2

Thanks for the support!
Unfortunately at the moment there is no complete compatibility with IE11 (I hope it becomes obsolete soon) because I have two other simple single page applications, using different modules, with the same problem ...

varolo picture varolo on 27 Jun 2019

Discussed and opted to invert the builds for now.

filipesilva picture filipesilva on 27 Jun 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 picture AaronMorse on 3 Jul 2019
👍1

@alan-agius4 can you take a look again with 8.1.0 please?

filipesilva picture filipesilva on 3 Jul 2019

@alan-agius4 can you take a look again with 8.1.0 please?

Works for me, thanks.

varolo picture varolo on 4 Jul 2019

@varolo Would you mind attaching your package.json so I can see what is different with mine.

I have created a new ng app and double checked all my package versions and I still cannot get this to run in IE11

https://github.com/AaronMorse/ie11-basic-new

If I run "ng version" I have the following:

@angular-devkit/architect 0.801.0
@angular-devkit/build-angular 0.801.0
@angular-devkit/build-optimizer 0.801.0
@angular-devkit/build-webpack 0.801.0
@angular-devkit/core 8.1.0
@angular-devkit/schematics 8.1.0
@ngtools/webpack 8.1.0
@schematics/angular 8.1.0
@schematics/update 0.801.0
rxjs 6.4.0
typescript 3.4.5
webpack 4.35.2

AaronMorse picture AaronMorse on 4 Jul 2019

@AaronMorse

After "ng update" on repro-app linked above, I have this 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.1.0",
    "@angular/cdk": "^8.0.2",
    "@angular/common": "^8.1.0",
    "@angular/compiler": "^8.1.0",
    "@angular/core": "^8.1.0",
    "@angular/forms": "^8.1.0",
    "@angular/platform-browser": "^8.1.0",
    "@angular/platform-browser-dynamic": "^8.1.0",
    "@angular/platform-server": "^8.1.0",
    "@angular/router": "^8.1.0",
    "@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.801.0",
    "@angular/cli": "^8.1.0",
    "@angular/compiler-cli": "^8.1.0",
    "@angular/language-service": "~8.1.0",
    "@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"
  }
}

and that's my ng version result :

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


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

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.801.0
@angular-devkit/build-angular     0.801.0
@angular-devkit/build-optimizer   0.801.0
@angular-devkit/build-webpack     0.801.0
@angular-devkit/core              8.1.0
@angular-devkit/schematics        8.1.0
@angular/cdk                      8.0.2
@ngtools/webpack                  8.1.0
@schematics/angular               8.1.0
@schematics/update                0.801.0
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.35.2

The error in the IE11 console is disappeared.

varolo picture varolo on 4 Jul 2019

Hi @varolo,

Thanks so much for the response. Much appreciated. I still can't for the life of me get anything to run under IE11. I have taken your Repro-App and run ng update and now my package.json is identical to your latest one and yet I still just get a blank page in IE. The console errors have gone but the page still doesn't load.

The only other difference I can see is your node version is newer. I am only on 10.16. I am going to try now to upgrade my node and see if that somehow has something to do with it.

Regards,
Aaron

AaronMorse picture AaronMorse on 4 Jul 2019

Hi @AaronMorse ,you're welcome.

You can't run anything in IE11 using "ng serve" to host the application locally or your problems are related only to "ng build" when you try to deploy your application?

varolo picture varolo on 4 Jul 2019

Are you using “ng serve” or “ng build” to try your application?

“ng serve” is designed for development related activities and is intended to be used with modern browsers. Such browsers provide the built-in development tools to support active development and optional integration with a developer’s IDE. Also, to reduce development round trip time, differential loading is disabled with “ng serve”.

clydin picture clydin on 4 Jul 2019

I have been using "ng serve" for the sample app I attached, however, I did build my proper app using "ng build --prod" and got the same result.

AaronMorse picture AaronMorse on 4 Jul 2019

Perhaps then my issue is unrelated to this ticket as the initial syntax error in main.js is no longer showing in the console.

AaronMorse picture AaronMorse on 4 Jul 2019

Has the “browserslist” file been configured to represent the required list of browsers for the application?

Also, can you provide the output “index.html” for the broken app (to ensure both types of scripts are being properly injected)?

clydin picture clydin on 4 Jul 2019

Seems my "browserslist" file was not configured correctly. Apologies for the run-around.

Works fine now.

AaronMorse picture AaronMorse on 4 Jul 2019

Not a problem. I’m glad you were able to
get it working.

clydin picture clydin on 4 Jul 2019

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

angular-automatic-lock-bot[bot] picture angular-automatic-lock-bot[bot] on 9 Sep 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

NCC1701M picture NCC1701M  ·  3Comments
purushottamjha picture purushottamjha  ·  3Comments
hareeshav picture hareeshav  ·  3Comments
brtnshrdr picture brtnshrdr  ·  3Comments
ericel picture ericel  ·  3Comments