How to integrate an existing manually bootstrapped angularjs microfrontend structure

[JesseDahl]

Hello,

So, I've got a angular 1.3.18 app that is already a sort of primitive form of a microfrontend/plugin architecture.

How it works:
UI's are deployed to a java server,
there is a REST endpoint that is called before app startup (when user requests the webpage url) that determines which apps get loaded. This list can change at will, so it is impossible to determine the apps at build or deploy time. Only when the user requests the page will I know the correct list of apps to show.

So basically when a user goes to the webapp URL, it begins the process of the host app calling the REST api, figuring out which apps to load, some more calls to get the rest of the necessary info for each app, and then loading every single js file for each app necessary up front.

Once that is all loaded, the host app manually starts angularjs using angular.bootstrap (with all the module names from all the apps).

The problem is that the various apps are not co-located in the same repo. Each app (host and client app) is in a different repo typically and each produces it's own minified/concatenated js file(s) using grunt.

It seems like this would be a problem since the approach in singleSpaAngularjs really only seems able to load 1 js file for a microfrontend. Not sure what approach I should take to work around that issue. Should I avoid the singleSpaAngularjs helper library and just use the plain single-spa library to register apps? Would that allow me to make multiple imports at runtime?