feat: Add support for crossorigin in differential loading

[BernhardRode]

We are using a transparent authentication gateway from Azure (https://docs.microsoft.com/de-de/azure/app-service/overview-authentication-authorization) in front of our applications. It captures all requests and some 'new' tags like:

• <script type="module" src="…">

need the attribute crossorigin="use-credentials" to be working, as the
It also seems, that Safari is a little bit stricter here, then chrome. Chrome just needs the attribute for the manifest, Safari for both.

If crossorigin is not provided, the browsers throw errors like:

https://login.microsoftonline.com/XXXXX/oauth2/authorize?response_type=code+id_token&redirect_uri=https%3A%2F%2Fapp.azurewebsites.net%2F.auth%2Flogin%2Faad%2Fcallback&client_id=XXXXX&scope=openid+profile+email&response_mode=form_post&resource=https%3A%2F%2Fgraph.windows.net&nonce=XXXXX&state=redir%3D%252Fmain-es2015.3959c9c93c3c451fefc1.js
denied by Cross-Origin Resource Sharing policy: Origin
https://app.azurewebsites.net is not allowed by Access-Control-Allow-Origin.

Some infos about the attribute:
https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes

We already did some tests:

• First we changed "target": "es2015" to "target": "es5" in tsconfig.json
  -> the application works

• Then we moved back to es2015 and added a npm build step to our pipeline (thanks to @manfredsteyer)

"build:prod": "ng build --prod && npm run build:replace",
"build:replace": "sed -i.bak 's/type=\"module\"/type=\"module\" crossorigin=\"use-credentials\"/g' dist/app/index.html",

-> the application works

Both workarounds are fine for us, but I think others would like to have an option to configure crossorigin for modules.

🚀 Feature request

Command (mark with an x)

- [X] build

Description

Add a compiler option:

• p.E. moduleCrossorigin - off | '' | anonymous | use-credentials

Describe the solution you'd like

Generated script tags in index.html should get an additional attribute if the new compilerOption is set:

If moduleCrossorigin is not set: <script type="module" src="…">
If moduleCrossorigin is '' or anonymous: <script type="module" crossorigin="anonymous" src="…">
If moduleCrossorigin is use-credentials: <script type="module" crossorigin="use-credentials" src="…">

Describe alternatives you've considered

Described manual replacements via npm scripts above.

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