Add script config for adding scripts as type="module"

[tmcconechy]

Command

build, config

Description

Looking at the script config https://angular.io/guide/workspace-config#style-script-config there does not seem to be any way to add the scripts as type="module" for esm.

If the third party script is delivered as an Es Module it cant be imported in the angular.json.

Seems like there is some thought about this

angular-cli/packages/angular_devkit/build_angular/src/utils/index-file/augment-index-html.ts

Line 94 in d086d17

if (isModule) {

This comment may be the one of why it won't add type="module"

angular-cli/packages/angular_devkit/build_angular/src/utils/index-file/augment-index-html.ts

Line 79 in d086d17

// Also, non entrypoints need to be loaded as no module as they can contain problematic code.

-> but still think it should be possible.

Describe the solution you'd like

Add a new setting to the script config, something like.

"scripts": [
  {
    "input": "node_modules/third-party/esm-script.js", 
    "inject": true,
    "scriptType": "module"
   }
],

Describe alternatives you've considered

• can not use angular.json and
• manually add a script tag or
• just import the module in the Angular module code

[angular-robot]

This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.

You can find more details about the feature request process in our documentation.

[egorwow70]

@alan-agius4
Hello, Alan. Is there any update regarding this issue?

[bernatgy]

Also interested if there is any progress in this... It's quite serious, because some third party libs started shipping/working with exclusively .mjs files. (eg. mozilla/pdf.js)

[alan-agius4]

When the script is in ESM, you can directly import it in main.ts or wherever it's required.

@bernatgy, it's preferable to use the explicitly imported script instead of relying on the prebuilt global script. This ensures that Dead Code Elimination (DCE) and tree-shaking optimizations can be applied to the library.

Example:

import { getDocument } from "pdfjs-dist";
const loadingTask = getDocument(pdfPath);

The scripts option should only be used for legacy scripts that are not ESM complaint.

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