IE11 error when build with production option #14777

varolo · 2019-06-14T09:55:19Z

🐞 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"
  }
}

The text was updated successfully, but these errors were encountered:

alan-agius4 · 2019-06-14T10:06:25Z

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.

varolo · 2019-06-14T15:26:52Z

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

Thanks!

Sathishkumar1805 · 2019-06-18T17:58:13Z

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

viswajeetlenka9 · 2019-06-18T18:22:21Z

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

psmyrdek · 2019-06-21T13:32:50Z

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

alan-agius4 · 2019-06-26T06:33:12Z

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 · 2019-06-26T09:47:58Z

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.

varolo · 2019-06-27T07:59:43Z

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 ...

filipesilva · 2019-06-27T17:45:21Z

Discussed and opted to invert the builds for now.

…d differential loading Invert the builds so that es2015 scripts output don't override the es5 version. Fixes #14777

AaronMorse · 2019-07-03T13:09:08Z

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.

filipesilva · 2019-07-03T13:44:00Z

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

varolo · 2019-07-04T12:04:20Z

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

Works for me, thanks.

AaronMorse · 2019-07-04T12:31:55Z

@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

varolo · 2019-07-04T12:52:14Z

@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.

AaronMorse · 2019-07-04T13:28:59Z

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

varolo · 2019-07-04T13:53:51Z

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?

clydin · 2019-07-04T13:58:26Z

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”.

AaronMorse · 2019-07-04T14:01:31Z

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 · 2019-07-04T14:05:44Z

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

clydin · 2019-07-04T14:10:38Z

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)?

AaronMorse · 2019-07-04T14:48:18Z

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

Works fine now.

clydin · 2019-07-04T14:50:35Z

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

angular-automatic-lock-bot · 2019-09-09T17:41:23Z

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.}

varolo changed the title ~~IE8 error when build with production option~~ IE11 error when build with production option Jun 14, 2019

alan-agius4 added the needs: repro steps We cannot reproduce the issue with the information given label Jun 14, 2019

alan-agius4 added area: @angular-devkit/build-angular freq1: low Only reported by a handful of users who observe it rarely severity5: regression labels Jun 18, 2019

ngbot bot modified the milestone: needsTriage Jun 18, 2019

alan-agius4 added type: bug/fix and removed needs: repro steps We cannot reproduce the issue with the information given labels Jun 18, 2019

ngbot bot modified the milestones: needsTriage, Backlog Jun 18, 2019

alan-agius4 self-assigned this Jun 25, 2019

alan-agius4 added the needs: discussion On the agenda for team meeting to determine next steps label Jun 26, 2019

filipesilva removed the needs: discussion On the agenda for team meeting to determine next steps label Jun 27, 2019

alan-agius4 mentioned this issue Jul 1, 2019

fix(@angular-devkit/build-angular): IE11 errors when using scripts an… #14951

Merged

vikerman closed this as completed in #14951 Jul 2, 2019

vikerman pushed a commit that referenced this issue Jul 2, 2019

fix(@angular-devkit/build-angular): IE11 errors when using scripts an…

8754ecb

…d differential loading Invert the builds so that es2015 scripts output don't override the es5 version. Fixes #14777

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

IE11 error when build with production option #14777

IE11 error when build with production option #14777

varolo commented Jun 14, 2019 •

edited

Loading

alan-agius4 commented Jun 14, 2019

varolo commented Jun 14, 2019

Sathishkumar1805 commented Jun 18, 2019

viswajeetlenka9 commented Jun 18, 2019

psmyrdek commented Jun 21, 2019

alan-agius4 commented Jun 26, 2019 •

edited

Loading

alan-agius4 commented Jun 26, 2019 •

edited

Loading

varolo commented Jun 27, 2019

filipesilva commented Jun 27, 2019

AaronMorse commented Jul 3, 2019

filipesilva commented Jul 3, 2019

varolo commented Jul 4, 2019

AaronMorse commented Jul 4, 2019

varolo commented Jul 4, 2019

AaronMorse commented Jul 4, 2019

varolo commented Jul 4, 2019

clydin commented Jul 4, 2019

AaronMorse commented Jul 4, 2019

AaronMorse commented Jul 4, 2019

clydin commented Jul 4, 2019

AaronMorse commented Jul 4, 2019

clydin commented Jul 4, 2019

angular-automatic-lock-bot bot commented Sep 9, 2019

IE11 error when build with production option #14777

IE11 error when build with production option #14777

Comments

varolo commented Jun 14, 2019 • edited Loading

🐞 Bug report

Command (mark with an x)

Is this a regression?

Description

🔥 Exception or Error

🌍 Your Environment

alan-agius4 commented Jun 14, 2019

varolo commented Jun 14, 2019

Sathishkumar1805 commented Jun 18, 2019

viswajeetlenka9 commented Jun 18, 2019

psmyrdek commented Jun 21, 2019

alan-agius4 commented Jun 26, 2019 • edited Loading

alan-agius4 commented Jun 26, 2019 • edited Loading

varolo commented Jun 27, 2019

filipesilva commented Jun 27, 2019

AaronMorse commented Jul 3, 2019

filipesilva commented Jul 3, 2019

varolo commented Jul 4, 2019

AaronMorse commented Jul 4, 2019

varolo commented Jul 4, 2019

AaronMorse commented Jul 4, 2019

varolo commented Jul 4, 2019

clydin commented Jul 4, 2019

AaronMorse commented Jul 4, 2019

AaronMorse commented Jul 4, 2019

clydin commented Jul 4, 2019

AaronMorse commented Jul 4, 2019

clydin commented Jul 4, 2019

angular-automatic-lock-bot bot commented Sep 9, 2019

varolo commented Jun 14, 2019 •

edited

Loading

Command (mark with an `x`)

alan-agius4 commented Jun 26, 2019 •

edited

Loading

alan-agius4 commented Jun 26, 2019 •

edited

Loading