Differential loading doesn't work on Safari (macOS/iOS)

[xoneill]

🐞 Bug report

Description

I am getting following error while loading app on Safari

🔬 Minimal Reproduction

• simply create a new Angular CLI project.
• build and run on Safari

🔥 Exception or Error

TypeError: 'text/html' is not valid JavaScript MIME type. 
promiseReactionJob

🌍 Your Environment

tested on macOS Safari v12.1.2 (14607.3.9)

Angular CLI: 8.3.4
Node: 10.16.3
OS: win32 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.5.3
typescript                        3.5.3
webpack                           4.39.2

The only workaround I found so far - switch back to es5 without a differential loading

[clydin]

I'm unable to reproduce this using an 8.3.4 newly created project with either a development build (ng build) or a production build (ng build --prod) on Safari 12.1.2.

Can you provide further details on how the project is being run on Safari?

[alan-agius4]

This seems to be more of a server configuration issue that is serving .js as text/html.

What server are you using?

[xoneill]

What server are you using?

we are using IIS8

I found this article Understanding ES6 Modules

Server Considerations
Modules must be served with the MIME type application/javascript. Most servers will do this automatically, but be wary of dynamically generated scripts or .mjs files (see the Node.js section below).

Regular <script> tags can fetch scripts on other domains but modules are fetched using cross-origin resource sharing (CORS). Modules on different domains must therefore set an appropriate HTTP header, such as Access-Control-Allow-Origin: *.

Finally, modules won’t send cookies or other header credentials unless a crossorigin="use-credentials" attribute is added to the <script> tag and the response contains the header Access-Control-Allow-Credentials: true.

After adding following attribute I was able to load the app
crossorigin="use-credentials"

Any thoughts on that? Can it be resolved on the server side itself, without a need of adding this attribute or is there a way of adding this attribute in Angular CLI

[clydin]

If the application's deployment configuration requires the use of credentials, then the CLI provides an option to enable the cross origin attribute: --cross-origin=use-credentials or the crossOrigin option can be added to the build options for the project within angular.json.

[xoneill]

Thank you, that helped

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