DEV Community

Micro Frontend in Angular: Using Module Federation

Bhuvan Sabarathnam on May 03, 2021

In this post, we will implement Micro-Frontends in Angular using Webpack 5 Module Federation. Credit: This post is based on this article written b...
Collapse
 
mightyraj profile image
mightyraj

Hi, I read it fully and then implemented in same way of your approach,
But I run the application to got this error.

[webpack-dev-server] Live Reloading enabled.
styles.js:3322 Uncaught SyntaxError: Cannot use 'import.meta' outside a module
localhost/:1 Uncaught TypeError: Failed to resolve module specifier "mfe1@localhost:5000/mfe1remoteEntry.js". Relative references must start with either "/", "./", or "../".

Collapse
 
harostark profile image
Haroon Rasheed

Hi. I have just come up with the solution. You need to remove "mfe1@" from the URL of remotes in the webpack configuration of host. It is most probably because of newer version of angular

Collapse
 
harostark profile image
Haroon Rasheed

Hi. I have the exact same issue. Were you able to sort it out? I also followed exactly the same thing but still this is the error at the end in console

Collapse
 
eduardogomezsk8 profile image
Eduardo Gomez • Edited

I need urgent help. I don't know how to solve this problem. I've tried creating a proxy.conf.json and still nothing.
Image description

Collapse
 
syedhannan profile image
Syed Abdul Hannan

how did u solve this?

Collapse
 
nizam9 profile image
Nizamuddin

Hi,
Thanks for this post. It is really very helpful to me.

Importing module from remote to host is clear from the above post, but how do I import component from remote to Host ? I have a requirement to show two remotes in the host on a single route. (Ex: header App & Sidenav App on router="/index" in Host application)

Any suggestion would be Appreciated. Thanks

Collapse
 
nizam9 profile image
Nizamuddin

If any one has any issue regarding importing modules/components from remote to host or vice-versa and data communication between different apps. I have got the solutions to this at:

stackoverflow.com/questions/685407...

Collapse
 
gr4vitonn profile image
gr4vitonn • Edited

Hey,

Interesting article. Thank you for sharing.

In your example (and also in the example of Manfred Steyer) the remote (mfe1) is a lazy loaded module defined in mfe1 project.

Would it be possible to load the mfe1 project's app module instead of the lazy loaded module?

The goal would be to:

  • have a host
  • have multiple remotes
  • each remote could have nested routes defined in app-routing.module.ts respectively which could load modules defined in the remote
  • the host should only load the remotes' app.module.ts lazily

I've tried it, but couldn't make it work correctly, because for some reason the remote's app.component.ts didn't run. What it does is that the nested routes are loaded into the router-outlet defined in the host. To fix that, I've added named router outlets but it totally messed up the routing.

Do you have any tip what could go wrong with this approach?

Collapse
 
sbhuvane profile image
Bhuvan Sabarathnam

Hi - There can be only 1 AppModule for an angular application. Hence we are loading feature module from remote.
You can have multiple feature modules in the remote and include them in the host. The feature modules can also have routing module.

Collapse
 
madankumar7 profile image
MadanKumar7

Hey,

Good explanation, I went through lot of websites, the writing was clumsy or too much info included. This wouldn't have been more clearer for beginners. Thanks, keep up the good work.

Collapse
 
sbhuvane profile image
Bhuvan Sabarathnam

Thanks Madan Kumar

Collapse
 
mpuertao profile image
Mauricio Puerta Ospina

excellent tutorial