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...
For further actions, you may consider blocking this person and/or reporting abuse
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 "../".
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
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
I need urgent help. I don't know how to solve this problem. I've tried creating a proxy.conf.json and still nothing.
how did u solve this?
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
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...
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:
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?
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.
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.
Thanks Madan Kumar
excellent tutorial