Angular module federation - share remote component

Question

I am using angular 11 with webpack 5 module federation. I have plans to expose component from remotes.

exposes: {
 "component": ".//src/app/app.component.ts"
}

while importing import {component} from "mfe@component"

I am getting build error "cannot find mmodule "mfe1@component"

how to consume remotely exposed component at design time

Please share the code how you shared and how you used. – Ajai Feb 26 '21 at 09:33 — Ajai, Feb 26 '21 at 09:33
Create a module, put component inside and expose module – Hardik Patel Apr 28 '21 at 08:43 — Hardik Patel, Apr 28 '21 at 08:43

score 0 · Answer 1 · answered Apr 14 '21 at 15:42

0

The path you provided is not correct. ./ is missing in the beginning of component name. change it to as shown below.

exposes: {
      "./component": "./src/app/app.component.ts"
 }

answered Apr 14 '21 at 15:42

1

How to consume this component in other project(shell)? I am having 3 micro frontend projects which runs independently. But i want to transfer data between these projects, how to pass? – Kamal Aug 11 '21 at 06:10

score 0 · Answer 2 · answered Mar 14 '22 at 13:52

0

Did you add the remote configuration in webpack.config.js in shell app ?

 remotes: {
     "mfe1": "http://localhost:5000/remoteEntry.js",
 },

answered Mar 14 '22 at 13:52

Karthikeyan

score 0 · Answer 3 · answered May 26 '22 at 03:57

0

I think it will work only for standalone components which has support from angular 14 onwards, on previous versions you need to expose the module

answered May 26 '22 at 03:57

Prats

3 Answers3