Is it possible to have Angular working as a mife?

[krishtoffer]

Following this blog series, I was wondering if it's possible to also append an Angular mife to this system. Angular uses it's own builder and they just recently switched to Vite, so I'm not sure if you can even add this plugin somehow in there.

What about the recommended single-spa way, they use the custom builder that is based on webpack. Is it possible to append a webpack mife to this Vite root?

Is it possible to have the root application based on the single-spa recommended setup, meaning no framework, while using this plugin purely for setting up mife applications?

[webJose]

Hello, @krishtoffer. I'll try to answer every question.

First and foremost: I used to know AngularJS a long time ago. I enjoyed working with it but since I'm a backend developer and my love resides with C#, I never really took interest in Angular IO (or just Angular). This is why the blog series has no mention of Angular: I just don't have the skills required to play with it.

Now, having said that, single-spa fully supports Angular. If Vite is a recent addition to Angular, then maybe the previous statement fails, however. I suppose that testing will be required to determine feasibility. Now, can I answer your question? Do I know if the new Vite + Angular projects produce an output that vite-plugin-single-spa understands? I don't know the answer and I cannot test myself because I don't know Angular nor do I want to learn it. If I may be so bold, I would ask that you test yourself and let me know if you encounter problems with the output. Only by testing we will know for sure, but the tester must know Angular.

Is it possible to append a Webpack mife to a root project created with vite-plugin-single-spa? Yes, as long as the module format matches. This plug-in doesn't specify a module format, so you should be able to request Vite to output system modules, and then tell vite-plugin-single-spa to inject an import map of type systemjs-importmap. Alternatively, you can ask Webpack-based mife's to output modules in ESM format. Personally, I made this plug-in with the idea of always using ESM as module format. I hate the module format wars in JavaScript. I fully support the idea of the world moving towards the official ESM module format.

Now, to your last question. It is possible to use a root config project created with the create-single-spa NPM tool with mife's created with vite-plugin-single-spa. The root config project expects SystemJS modules, though, so the Vite mife projects must be configured to output SystemJS modules.

It is also possible to create a Vite root config project that is devoided of user interface (and UI framework) with vite-plugin-single-spa. How? I would create a new Vite + Svelte project, then remove all Svelte things, which aren't many. It is very easy to clean up. Once you do this, you add vite-plugin-single-spa, single-spa and code to register the various mife's using single-spa's registerApplication() or the layout engine.