CODEWITHSUNDEEP
javascriptangular
Philipp Gfeller
Philipp Gfeller

Reputation: 1259

Angular 12 load external scripts as type module

Is it possible to set Angular to load external scripts defined in the angular.json under architect/build/options/scripts as type="module"?

When running Angular I can see the automatically injected script tags like this:

<script src="runtime.js" type="module"></script>
<script src="polyfills.js" type="module"></script>
<script src="styles.js" type="module"></script>
<script src="scripts.js" defer></script>
<script src="vendor.js" type="module"></script>
<script src="main.js" type="module"></script>

The scripts.js has a defer attribute, but not type="module". I'm trying to load a Stencil JS Web Component installed via npm into my app. The Stencil Component Script needs to be loaded as module, otherwise the other imports won't work.

Upvotes: 2

Views: 2511

Answers (1)

Mihaita Tinta
Mihaita Tinta

Reputation: 389

I can also confirm it's not currently possible to add a type attribute to the scripts field. Possible values are: object with inject|lazy|bundleName|input attributes or directly a string.

To use a WebComponent in Angular, I ended up adding an import statement into the polyfills.ts file

import 'node_modules/my-web-components/dist/example.js';

I was able to see the content imported correctly and my web component was active in my angular component html file. content added here

Upvotes: 2

Related Questions