Problem
I am developing a plugin based architecture in angularjs.
To load a plugin in runtime I first send a request to the backend to download and store the plugins source code. This way I already have the source code available when loading the plugin in the future.
However when trying to import this source code in the frontend I have the following problem:
Because I am using openapis typescript-angular generator I dont have an explicit url to use inside await import(<url>)
but rather an autogenerated service that returns an Observable<Blob>
. Of course I could use the plugins url to import the plugin directly from its remote but this way I have to fetch it every time I want to import it (eg on startups).
What I tried
- Creating a blob url using
URL.createObjectUrl(<blob>)
and import it, but I am using angulars native federation which internally useses-module-shims
and it throws the errorTypeError: Failed to construct 'URL': Invalid URL
- Same problem with data urls:
const reader = new FileReader();
reader.onload = async function () {
const blobAsDataUrl: string = reader.result as string;
const module = await import(blobAsDataUrl);
};
reader.readAsDataURL(<blob>);
- creating a
script
tag withtype=module-shim
and usinginnerHTML
to inject the plugins source code does work, but then I dont have access to the plugins exports and because every plugin exports a function calledinitialize
I cannot use global scope.