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

Answer 1

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"
 }

Answer 2

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

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

Answer 3

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