Safari Unauthorized 401 on loading Angular 8 application [Solved]

Today I was struggling with an Angular 8 application. The application is hosted on a internal network without authentication and on an external network with authentication. Before upgrading to Angular 8 the application works on all browsers both internally and externally.

After upgrading to Angular 8 suddenly the application does not work externally on Safari browsers (both Mac and iPhone). Only a white screen is displayed. After do some debugging, we found that the server returns 401 Unauthorized on some of the javascript files loaded by the angular application. 

On the internal network the application works as expected.

"I'm going crazy"

 

Luckily I found the solution on stackoverflow:  https://stackoverflow.com/questions/56777096/angular-8-differential-loading-failing-due-to-auth-issues-with-dotnet-core

":D, I'm not going crazy"

So what is the real problem?

Due to Angular 8 differential loading the script tags are added like this:

<script src="polyfills-es2015.00ce1f051b27efe483ef.js" type="module">

And for some reason Safari does not sent the authentication for scripts with 'type="module"'.
The way to solve this is to add 'crossorigin="use-credentials"' to the script tag. 

When using Angular 8 you can let Angular add this to the script tags by updating the angular.json file:

{
   ...,
   "build": {
     "builder": ...,
     "options": {
        ...
        "crossOrigin": "use-credentials"
     }
   }
}

After this the script tags look like this:

<script src="polyfills-es2015.00ce1f051b27efe483ef.js" crossorigin="use-credentials" type="module">

Application with authentication no also works in Safari. Great!