Micro Frontend With Angular & React Using Module Federation
Harshal S.
Micro Frontend Consultant | Certified Angular Developer | ?? JavaScript | ?? with Angular | PUCSDIAN ?????1??5??
I have already explained how micro frontend work please check out this link if you are aware of it (Micro Frontend). Same for if you are aware of Module federation do check out my previous article (Micro Frontend with Module federation). Now in this article, I will be going to explain how the micro frontend works with module federation using multiple frameworks. I have used #Angular 14 and React 17. Module Federation allows loading Micro Frontends at runtime.? Module Federation is an integrated part of web pack 5, and hence, it works with all modern web frameworks.
Let's build of Micro frontend. First, we need to create one parent app which is our container. Then we have to create multiple MFEs (micro frontends). In this example I have created an angular container as a container then I have created angular-mfe and one react-mfe.
As we already discussed in the previous article how we can create a micro frontend using #Angular. Now I direct jump on the?one MFE in react. I have created a simple application in React 17. Then we have to add some webpack dependencies using?npm install --save-dev webpack webpack-cli html-webpack-plugin webpack-dev-server babel-loader. Whatever component we have to expose for #React we simply have to create a custom element of then using the following syntax.
Then we have to update our webpack.config as follows. Once we have updated the webpack.config file we have to expose the port number in?devServer object. After this, we need to update our package.json file as per webpack. and simply run the react application.
领英推荐
Which creates one?remote entry file which we have to import into our container application. So let's look at the container routing file. When we have to import React in angular we need to add a web component wrapper using module-federation-tools. Which we can access after installing?
npm install @angular-architects/module-federation-tools this package.
You can check all the details code on my Github repo. https://github.com/harshal77/micro-frontend-multi-framework/blob/development/README.md
Software Engineer | Masters in Computer Science at University of Cincinnati | Ex Phenom | Reactjs | Javascript | Spring Boot | Java | SNIST'22
1 年Hello?Harshal S.! I have found this article very helpful. I've been working on setting up a microfrontend architecture with a React container and separate remotes for Angular and React apps. While I've successfully loaded components from the React remote, I'm facing difficulties integrating the Angular remote into the React container. Any advice or suggestions on how to resolve this issue would be greatly appreciated. Thank you!
Engineering Head | Quantum Computing Researcher | PhD in Quantum Information Theory | Cloud & AI Technologist
1 年Do you know how I can send prop history from host angular to react remote?
C4GT'23 @Sunbird-Ed || Frontend React Developer || Writer
1 年Hii Harshal S. , the way you explain the topic is amazing but I am facing an issue , when i try to run angular-container without running react-mfe on server I am not able to access my react-mfe exposed feautre in angular-container.Why this is happening ?