older (es5) browsers not fully supported when using workspace scripts

[cladera]

🐞 Bug report

Command

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

Is this a regression?

Yes, the previous version I'm aware this was still working was 8.0.

Description

Since I upgraded the cli to 8.3.3 my applications do not provide support for older browsers such as IE11.

🔬 Minimal Reproduction

1. Create a new project.

npx -p @angular/cli@8.3.3 ng new es5-support

2. Change the browsers list file to consider IE 9-11 (remove not as suggested in the comments):

> 0.5%
last 2 versions
Firefox ESR
not dead
IE 9-11

3. Create a custom script that uses, for example, Promises:

const myPromise = new Promise(function(resolve) {
  setTimeout(function(){
    resolve('Promise resolved');
  }, 500);
});

myPromise.then(console.log);

4. Add this script to the build target (angular.json):

... 
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/es5-support",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": [
              "my-script.js"
            ]
          },
... 

5. Build the application:

ng build --prod

6. Deploy and run the application on IE11.

Here is a repo that reproduces the error: https://github.com/cladera/ng-cli-es5-support

🔥 Exception or Error

SCRIPT5009: 'Promise' is undefined
File: scripts.31a5e5bdf3ecf1f1be1c.js, Line: 1, Column: 1

🌍 Your Environment

Angular CLI: 8.3.4
Node: 12.3.1
OS: darwin x64
Angular: 8.2.6
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.4
@angular-devkit/build-angular     0.803.4
@angular-devkit/build-optimizer   0.803.4
@angular-devkit/build-webpack     0.803.4
@angular-devkit/core              8.3.4
@angular-devkit/schematics        8.3.4
@angular/cli                      8.3.4
@ngtools/webpack                  8.3.4
@schematics/angular               8.3.4
@schematics/update                0.803.4
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.39.2

Anything else relevant?
If I run the build with the environment flag NG_BUILD_DIFFERENTIAL_FULL set to 1 it runs a build that does work on IE 11.

Anyway, one may wonder why do I need to add a script to my application that may break it whatsoever. Well, in an ideal world, all the libraries I need would be full UMD/cmjs compatible and I may just import them as a normal vendor dependency. But sadly, that's not my case. I need to add some scripts as "global" because I'm forced to do it. My point is, this worked fine few minor versions ago and now it doesn't which in my opinion is a breaking change.

[clydin]

Within the index.html, can you try moving <script src="runtime-es5.js" nomodule defer></script> to the top of the list of scripts?

[cladera]

@clydin I assumed you meant the index.html generated by the build command.

I moved the runtime script line to the top and, yes the app now works on IE11.

[clydin]

Yes. Thank you. A permanent fix will be forthcoming.

[angular-automatic-lock-bot]

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