I'm fairly new with Javascript/Typescript and was developing a Single-Spa with Single SPA Router Searching for info about registering applications I found different ways of doing that, one way is using the LayoutEngine that "automatically" register my applications this way:

const routes = constructRoutes(microfrontendLayout);
const applications = constructApplications({routes, loadApp({name}) {
   return System.import(name);
}});

const layoutEngine = constructLayoutEngine({ routes, applications }); 
applications.forEach(registerApplication);
layoutEngine.activate();

From what I understood is, in microfrontend-layout.html we have to put something like an HTML tag in this way

<application name="@prueba-organizacion/micro-prueba-app1"></application>

with that and having an importmap in index.ejs the app was loading fine.

But then I found another way, the manually way:

A)

import { registerApplication, start } from "single-spa";
registerApplication({
     name: '@prueba-organizacion/micro-prueba-app1',
     app: () => System.import('@prueba-organizacion/micro-prueba-app1'),
     activeWhen: (location) => location.pathname.startsWith('/app1')
});
start();

But that says: Promise\<System.Module\> is not assignable to type Application\<{}\>

Then I found ANOTHER WAY of doing the same as above:

B)

System.import('single-spa').then(({ registerApplication, start }) => {
   registerApplication({
     name: '@prueba-organizacion/micro-prueba-app1',
     app: () => System.import('@prueba-organizacion/micro-prueba-app1'),
     activeWhen: (location) => location.pathname.startsWith('/app1'),
   });
   start();
});

The thing here is, what's the difference between point A) and point B)? I mean, they're importing the modules and registerApplication, start functions but one of them is throwing me an error.

I'm using "single-spa": "^5.9.3" from package.json

Thanks!

I've tried both ways, one of them is not working, the other one is working (B) as expected