'How to share Angular MFE's secondary entry point with other remote apps

We are facing an issue with respect to Angular MFE's secondary entry point.

The code base structure as below:

my-app
|---------apps
           |-----shell
           |-----mfe1

|---------libs
          |----libA
               |-----src
               |-----secondaryEntryPoint1
                     |----ng-package.json
                     |----src
               |-----secondaryEntryPoint2
                     |----ng-package.json
                     |----src

We have included the libA as sharedMappings in the webpack.config of both shell and mfe1 app as well these paths are referenced in tsconfig.base.json. The lib is referenced as @myapp/libA/secondaryEntryPoint1 -- This is not referred as Singleton.

We have also tried adding the shared mapping in the webpack by passing the below properties:

version,
import - (path to the respective index file)
includeSecondaries: true

As shown in the image: Shared object

The above approach was also not working as expected and the secondary-entrypoints are initialised multiple times.

micro-frontend angular13

Solution 1:^[1]

you need to share each secondary entry point explicitly in the webpack config.

If you go with @angular-architects/module-federation, you can also set

[1] https://www.npmjs.com/package/@angular-architects/module-federation#user-content-share-helper

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Manfred Steyer

'How to share Angular MFE's secondary entry point with other remote apps

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]