Systemjs: Different way to load bundle with SystemJS

[lucastagliani]

Hi! Me and @tuleferreira are using Single-SPA to load our microfrontends in our SPA and using SystemJS to import our WebComponent (that already has single-spa-html lifecycle).

There is any way to use SystemJS without importing it directly in tag script from a HTMl file?

We are using typescript and already have installed @types/systemjs.

This code already works and correctly loads our external web component. But we can't just add this scripts in HTML file like this. Any tips?

Important to know:

• We are using webpack on both (SPA and Webcomponent). Both has output.libraryTarget = 'AMD'.
• We don't have a monorepo.
• We don't have access to the real HTML file to add scripts - like we are doing in the first code block.

[joeldenning]

Hi Lucas,

Loading systemjs with script tags is the recommended way to use SystemJS. Since systemjs is the thing that loads your javascript bundles, it generally should not be in a javascript bundle itself. The systemjs library is a global variable so that it can be used as your module loader.

But we can't just add this scripts in HTML file like this

Why not? Why is your HTML file difficult to modify? I would suggest making it easier to modify your HTML file 😄

All of that said, you can try using rollup or webpack to bundle SystemJS into a javascript file that gets script tagged. However, I'd recommend not doing this unless it's the only option. Doing so was discussed in #1952 and you can look there for more information.

[tuleferreira]

We have found a solution to import the required modules with script-loader, as in the image below. The issue has been resolved and I hope this can help others whit the same issue.

This allowed us not to have insert the script tags in Head directly.

Why not? Why is your HTML file difficult to modify? I would suggest making it easier to modify your HTML file 😄

We can't do this because we are working on an existing application that has restrictions.

Any comments about this solution are valuable.

Thank you!

[joeldenning]

Thanks @tuleferreira, I'll close this with your solution as a good workaround that could probably work for Lucas