Angular Microfrontends with NX and Module Federation
HTML-код
- Опубликовано: 3 фев 2025
- Read the full article here: www.devbyseb.c...
Are you looking to build scalable and modular Angular applications using Microfrontends architecture? Look no further! In this in-depth tutorial, we'll walk you through the powerful combination of NX and Module Federation to create efficient, maintainable, and scalable Angular Microfrontends.
Microfrontends have gained immense popularity due to their ability to break down monolithic applications into smaller, independent, and manageable parts. When combined with Angular, a robust and feature-rich framework, you unlock a world of possibilities for building complex web applications.
In this tutorial, we'll start by explaining the core concepts of Microfrontends and how they differ from traditional monolithic architectures. Understanding these fundamental principles will set the stage for an efficient development process.
Next, we'll delve into NX, a powerful set of extensible dev tools built around Angular and other frameworks. NX not only enhances development productivity but also enforces best practices for code organization, testing, and maintaining a clean codebase.
The real magic begins when we introduce Module Federation. This revolutionary feature, introduced by webpack 5, allows us to share code between multiple applications seamlessly. With Module Federation, you can create a Microfrontends architecture that maximizes code reuse and optimizes performance.
Throughout this tutorial, we'll provide step-by-step instructions on setting up an Angular project with NX and integrating Module Federation to create Microfrontends. You'll learn how to create individual feature modules, how to share these modules across different applications, and how to manage dependencies between Microfrontends effectively.
But it doesn't end there! We'll also cover advanced topics like lazy loading Microfrontends, optimizing builds for production, and implementing dynamic loading strategies for better user experiences.
Whether you're a seasoned Angular developer or just getting started with Microfrontends, this tutorial caters to all skill levels. By the end, you'll have a comprehensive understanding of how to architect, build, and deploy Angular Microfrontends using NX and Module Federation.
Don't miss out on this opportunity to enhance your development skills and take your Angular projects to the next level. Watch the full tutorial now and revolutionize the way you build web applications with Angular Microfrontends! Like, share, and subscribe to stay updated on more exciting tutorials and expert tips. Happy coding!
#angular #frontend #microfrontends #architechture #angularforbeginners #nx #monorepo #programmer
I thought it was nice of you to demonstrate and explain how to configure a Micro-Frontend with Nx. Thanks for sharing some of your knowledge.
Thank you mate 🙏🏼
Good explanation / Bad presentation
Please make sure to present the whole screen. Most of the presentation is hard to know where exactly are you positioned and what are you doing.
Stop clicking so fast and switching between the files unnecessarily.
Give a brief introduction of the tools and their usage. I know this is not a tutorial for NX extension but not everybody has the same experience/knowledge.
Thanks so much for making and sharing this content. It's so valuable :)
Thanks for the feedback mate 🙏🏼
Crazy world. People making stupid videos of videogames get million of views. But this piece of art that enhances human knowledge just few thousands. Not fair men. But here we are. Few in number. But BEST in quality.
Thanks for your awesome feedback mate and thank you for watching 🙏
Really good explanation, quick tutorial gave me a better understanding of the concept. thanks a lot!
Thanks for the awesome feedback mate and thank you for watching 🙏🙏
Thank you very much for this video. Plz share more interesting videos
Thanks for the feedback mate and for watching. I will start doing so again 😀
Brilliant tutorial. Thank you so much!
Thank you brother 🙏🏼
hey @Sebastian Persson,
I need help setting up module federation with Angular for two separate applications in different folders. One folder/project/workspace contains the components I have developed, while another separate folder/project/workspace has my web application. I want to load the components remotely into the web application using module federation. Is this possible? If so, how can I achieve it?
That is possible but you would have to reconfigure a lot of things to get that working mate. Use NX instead, config would be easier
Really awesome 👍👍👍Do consider making large project tutorial in the future? Would be awesome!
Thanks for watching mate. Thanks for the awesome feedback - I will do that for sure 🙏🙏
i end up watching lots of your videos last few days and must say all are very good. there are too many beginners videos in youtube which is good because people struggle quite a bit when get started but i find very less video for intermediate level who know all basic and able to develop small to midium size app and trying to get to the next step. lots of your video definitely seems to aim to people like them. much appreciated.
Thanks for your awesome feedback mate, and thank you for watching 🙏🙏
Awesome video man. Thanks a lot.
Thank you for watching mate 🙏🙏
How can I share data between multiple sub-applications? And is it possible to declare some state in the main application and have sub-applications be able to read and mutate it?
Awesome question mate - I will outline this in a new video as well 👌
Hey mate - a new video outlining sharing data and building the applications can be found here: ruclips.net/video/edTA7amdvzI/видео.html&ab_channel=SebastianPersson
I really appreciate your content!!!
Thanks for watching and for the feedback mate 🙏🙏
Hi could you please help in creating micro frontend angular architecture . I'm stuck that way.
Thanks for the comment, have you followed the exact same steps?
@@DevBySeb yes followed the same steps.. could you please give me instaa link for ahead conversation.
Hi mate. How can i bind angular 13 with angular 17?
That is not possible with NX monorepos mate. The idea is to have same packages cross all projects and libraries
Does it work if the lib project is not same repository? I have struggle when using translation module(@ngx-translate/core). My remote and host project is not same repository (total independently). It can't load TranslateSerice when access remote url from host. Please create a sample about that
Where`s commands to build, compile application? Im dont understand english very well. Wheres the link of steps please?
You can use the Nx console extension in VsCode to find all of the schematics mate
@@DevBySeb Thank you!
@@well3991 tai vídeo legal para criar workspace nova sem sujeira rsrs
Really bad way of presenting screen where you can’t see bottom, top, behind web page due to cutting and so many flows.
Thanks for the feedback mate. I will do my best to improve 😁
Hey seb! Let’s say that the host application is the one that takes care of the user login. But the remote apps requests need for example the auth token as well to make requests. How do we share data between apps? For example I want to make only one request to get the user data and be able to use it in all remote apps.
Hey Federico, excellent question. Nx has a step by step guide here: nx.dev/recipes/angular/dynamic-module-federation-with-angular hope it helps 😁
@@DevBySeb actually your latest video has this exact example I was looking for 😅😅 great demo. Small feedback for you when making videos is you could probably edit the video and skip the parts when something doesn’t go as you expect. Keep up making cool content 😉
@@fredericojesus4135 Thanks for the feedback mate 🙌🏼🙌🏼
Thank you SIR
Thank you for watching mate - I hope you enjoy! :D
Thank you really amazing,please do ngrx series with crud...
Thanks for watching and for the awesome suggestion mate! I will do that for sure 💯
helpful !
Thank you for watching mate 🙏🏼
@@DevBySeb are you from Australia ?
@@abhishekraj-jg3py from Sweden mate 👍🏼
*most people don't care how you look. you wasted one third of the screen so we can see you*
Haha - thanks for that feedback mate. Will take that into consideration
👏👏👏
u just showed to us documentation, i didn't find something useful. i would wanted to look at how to deploy it, but u just saying: we're not looking into that...
I'm sorry for a late respons mate. I will make a video explaining how to build and deploy it :)
Too fast
Thanks for the feedback mate. Will take this into consideration 🙏🏼