Importing javascript es module from blob url or data url does not work

[stad-nico]

I am using angulars native federation to dynamically import javascript plugins in runtime. Because I am using autogenerated services from openapi I cannot use await import(<pluginUrl>) but instead the service fetches the content and provides it as a blob.
However creating a blob url or data url and importing this url does not work:

this.pluginsService.getSourceCode(plugin.id, 'response').pipe(
    tap(async (p) => {
        const blob = new Blob([p.body!], { type: 'text/javascript' });
        const blobUrl = URL.createObjectURL(blob);
        const m = await import(blobUrl);
    })
).subscribe()

fails with

TypeError: Failed to construct 'URL': Invalid URL
    at pushSourceURL (es-module-shims.js:744:25)
    at resolveDeps (es-module-shims.js:761:7)
    at topLevelLoad (es-module-shims.js:604:5)

However creating a script tag and using innerHTML to load the js does work:

const script = document.createElement("script");
script.type = "module-shim";
script.innerHTML = await blob.text();
document.body.append(script)

But this way you dont have access to the exports of the js module.

[guybedford]

Blobs should be supported just fine. It seems like the issue is something in the dependency graph that you have an invalid URL. Try adding a log statement at that line to see what URL is not a valid URL being generated and that might well illuminate the root case.

Added a test in #437 that verifies blob URLs do behave correctly.

[stad-nico]

function pushSourceURL (commentPrefix, commentStart) {
    const urlStart = commentStart + commentPrefix.length;
    const commentEnd = source.indexOf('\n', urlStart);
    const urlEnd = commentEnd !== -1 ? commentEnd : source.length;
    pushStringTo(urlStart);
    console.log(source.slice(urlStart, urlEnd), load.r)
    resolvedSource += new URL(source.slice(urlStart, urlEnd), load.r).href;
    lastIndex = urlEnd;
}

logs pihub-plugin-ui.mjs.map blob:http://localhost:4200/f4a62098-42b3-4c5f-9938-bcdb8190d372.

I am not sure which part causes the error, the .js.map extension is being logged by other imported files and it works fine for those, so maybe the base blob:http://localhost:4200/f4a62098-42b3-4c5f-9938-bcdb8190d372 is the issue?

[guybedford]

Thanks, that helped track it down. Fix in #437.