Safari 12.1.1 loads both the generated es5 as well as es2015 bundles

[bvahdat]

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

I did not check that!

Description

Safari 12.1.1 loads both the generated es5 as well as es2015 bundles.

🔬 Minimal Reproduction

See this repo with the provided details about how to reproduce the issue.

🔥 Exception or Error

🌍 Your Environment

Angular CLI: 8.1.1
Node: 10.16.0
OS: darwin x64
Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.801.1
@angular-devkit/core         8.1.1
@angular-devkit/schematics   8.1.1
@schematics/angular          8.1.1
@schematics/update           0.801.1
rxjs                         6.4.0

Anything else relevant?
I'm observing the issue only on Safari 12.1.1 and did not check the other versions of it. I also don't see this behaviour on OS X 10.13.6 using Chrome 75.0.3770.142 or Firefox 68.0 (64-bit)

[clydin]

This is actually a known issue with Safari 11+ that can happen in certain situtations (https://bugs.webkit.org/show_bug.cgi?id=194337).

Note this point in the bug report:

• When there's no "traditional" script on top of HTML that has neither "nomodule" nor "type=module"

Removing the inline script element added in the reproduction and serving normally (without a server that injects additional scripts into the HTML) causes only the ES2015 files to be fetched as expected.

[bvahdat]

@clydin Thanks for clarification.
Are you aware of any possible workarounds in an angular-cli based app in Safari?

[clydin]

A new CLI app will work when served normally. The presence of classic scripts are the issue here which most live reload servers will inject into the HTML prior to serving (and which your demo app is also adding which is triggering the issue).

[bvahdat]

Thanks for your reply @clydin.

The problem in our application is that on top of Angular CLI injected script tags, we've got a legacy ES5 javascript code inside index.html as the following:

<script type="text/javascript" src="es5-minified.js">

Now if we want to make use of differential loading under Safari, I guess we would need to change it it:

<script type="module" src="es5-minified.js">
<script nomodule src="es5-minified.js">

But the problem is that the code is ES5 and not a valid ES2015 module, example the this keyword is used to reference the window object etc.

Do you see any possible solution to this using Safari?

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