single-spa.js.org | repo contains the source code | Single Page Application library

The question:

How (is it possible) to configure webpack (with single-spa), to take make some packages (projects) under a scope (@orginazation) externals and other internals (not external) ?

Project information:

We are building a single-spa application using webpack an uses Github npm registrer (and github actions). All the micro front-ends are projects in Github, and some of them are util/helper/provider projects, that is compiled as externals with webpack.

But some of them are meant to be compiled with the micro-frontend (must not be external)

It seems that when webpack sees one of the project under the organization scope as external, it set all package under that scope to external!

As we can see from the log the "CompilingTool" will also be compiled as external, event thought it should not.

The packages are set in the files as:

I have 3 TypeScript projects below:

1. root-config
2. parcel, let us call it my-app
3. in-browser utility module, let us call it api

All the projects above were generated using the create-single-spa command.

In the api/src/lomse-api.ts file, I'm exporting the fetchPeople module as shown below:

I've created a few apps that follow the same pattern as the react-microfrontend projects listed on the Single-spa examples page. However, these examples are not using TypeScript.

I am receiving a TS error when App2 tries to import a function that exists in App1, because App2 is unable to find the typings for the App1 object. And this makes sense to me, since the importmap.json that is referenced in the index.html file of the root-config project only has a URL listed for the .js file of each microfrontend. I really don't want to add @ts-ignore statements everywhere, and I also don't want to do cross-app communication without being type safe.

An example of what I'm referring to:

This file in the Planets app references the Button component from the Styleguide app. I am unable to build this unless I place a @ts-ignore on the line before the import statement, because my Planets app cannot find the type declarations for Styleguide.

I am very new to import maps and SystemJS in general, so if anyone could point me in the right direction, I'd appreciate it. I've actually gone through the trouble of building my Styleguide as a regular npm library and just including it as a dependency in the Planets package.json file... which kind of defeats the whole purpose of using Single-spa in the first place.

importmap.json

I am creating micro frontend angular application using single spa.How can i load i18n files from assets folder.

I have followed the instructions from : https://single-spa.js.org/docs/ecosystem-angular/

Angular Version : 9.1.12

Single spa : 4

single spa angular: 4.4.2

Do we need to add some additional configuration in webpack so that it loads the i18n files from assets folder ?

I need a help to communicate from my container single-spa to loaded angular app ( child ). when user click on parent app ( spa-container ) option, that should communicated to child application to change the mode.

it will not happen very frequently. But not able to find a way to communicate from container to loaded angular application.

there is a detail given by spa itself : spa-communication detail but not clear and there is no detailed steps. any one help me?