Angular, Micro Frontends (Module Federation), and NX Monorepos - Shared Data, Libraries, and Builds
ฝัง
- เผยแพร่เมื่อ 7 ต.ค. 2023
- Angular: Angular is a popular open-source framework for building dynamic web applications. It provides a structured approach to web development and offers a wide range of tools and libraries for creating robust, scalable, and maintainable applications.
Module Federation (Microfrontends): Module Federation is a modern architectural pattern that allows you to build and deploy independent, self-contained modules (microfrontends) within a single web application. This approach enables teams to work on different parts of an application independently, making it easier to scale and maintain complex web projects.
NX Monorepos: NX is a set of extensible dev tools for monorepos, which are repositories that contain multiple projects or applications. It helps manage the development, testing, and deployment of multiple projects within a single codebase efficiently. NX provides powerful tools for building, testing, and sharing code across different parts of a monorepo.
Shared Data: Shared data refers to the practice of sharing information or state between different parts of an application, such as components or modules. In the context of microfrontends, it's essential to establish efficient mechanisms for sharing data between independent modules to ensure a cohesive user experience.
Libraries: In the context of NX and Angular, libraries are reusable code modules that encapsulate specific functionality. They are designed to be shared across different projects within a monorepo, promoting code reusability and maintainability.
Builds: Building refers to the process of transforming source code into executable code or distributable assets. In web development, building typically involves tasks like compiling TypeScript to JavaScript, bundling assets, and optimizing code for production. Efficient build processes are crucial for delivering fast and reliable web applications.
In summary, the provided title suggests a comprehensive exploration of how these various concepts interact and work together within the context of Angular development, Module Federation for micro frontends, and NX Monorepos. It also highlights the importance of shared data, libraries, and efficient build processes in modern web development workflows.
![ไม่ต้องมีที่ที่ให้ฉันอยู่ แต่ขอแค่มีฉันอยู่ก็พอ (Spaceless) - getsunova [SHORT FILM]](http://i.ytimg.com/vi/MuT0d_cvJkc/mqdefault.jpg)
Thanks a lot man, after a long search I found the real use of Micro-Frontend in this video 😇
Thanks for watching mate, hope you liked it 🙏🏼🙏🏼
Amazing video, once again... thank you!
Thanks and thank you for watching mate 🙏🏼
Amazing!, thanks Sebastian for sharing
Thanks mate, and thank you for watching 🙏🏼🙏🏼
Great video👏
🙏🏼🙏🏼🙏🏼
Welcome back Sebastian, glad to see you upload new content. Also the resolution is only 360p if you didn't notice, the text is barely visible
Thanks mate! Omg - I will look into this - thanks for letting me know!
Seems like TH-cam is still processing the video - a better quality should be available in 30-60 minutes. :)
Up 'n running in good quality now! :)
I was just searching it and got at the same time.. thanks a lot.. could you please do one large playlist with better ui and concepts to understand both mono repo and remote
Will do that for sure mate! Thanks for watching by the way! 🙌🏼
I am working on a Nx and Angular v17 application which I am creating as MFE. This video from Sebastian is one of the best I have come across in my research as it explains key concepts. It would be great to get some more videos explaining (with examples) the concepts behind libs, features (feature shell) etc. I would also like to see a video on how to share styles and assets between apps and libs easily as this is not explained very well in the Nx documentation. Great work - love your content.
Thanks for your awesome feedback mate 🙏🏼 I will add that to my todo-list of videos. Once again - thank you 🙏🏼
hey,
I'm also working on a project where i use angular and react to create mfe and use single spa. Do you have any suggestions where i can find a way to share data between the mfe.
thanks in advance.
Have you looked at Zustand or Jotai?
@@alanrutter3273 will look into that
Hi i'm also working on angular 17 could you please share the MFE project git link for reference
Gold!!
Thanks mate 🙏🏼🙏🏼🙏🏼
Hi Sebastian, nice video, is it possible to have this same approach with packages.json files per application?
That is, I can have angular applications with different versions in a productive environment, or also apps with different versions of libraries but that work with each other.
Hey mate. Excellent question! Nx supports one package json for all projects. This simplifies lifecycle management (upgrading, maintaining externats packages for the whole organisation. Its also easier to resolve vulnerabilities, and it is good in terms of many aspects such as; shared libs and fetures. More info can be found here: nx.dev/concepts/more-concepts/dependency-management
Lot of thanks Sebastian. What I was expected and searching it and i got at the same time thanks a lot man.. its a great time. Could you please do some video for mono repo with shared asset folder and multi repo concept to integrate multiple repo apps. With auth and session, cookies concepts
Thank you for watching mate. I will put it on my list of todos - Thanks! 🙏🏼
Is any idea about how to resolved (NX Daemon process terminated and closed the connection error). i have tried lot . reset, restore, clear cache, reinstall, migrate, etc. and i have mallualy start the daemon. daemon was started but while run the nx serve command again got the same error. its dosen't work for me. it was totally blocking @@DevBySeb
Hello, good tutorial bro. i am from argentina
I have the following problem.
The images of my assets are shown broken when I launch my mf-login together with the main but if I run it individually the mf-login the image is displayed correctly.
Hello my friend, and thank you! It should work out of box, given the baseHrefs are set. Can you ensure that the baseHrefs are correctly set and that a leading slash for the images is set e.g: ”/assets/…”.
I will double check this during the week!
@@DevBySeb
Do you know any way to apply rules by applications? For example, each application is taken by a team and only that team has permission.
Is it possible to have access to the github project ?
Thanks for watching mate, I will check if I still have that code 🙏🏼
Hello, Sebastian. I've got a similar setup, but when I click on a remote routerLink (/cart in your case) from the host app (/host), I get the error "This localhost page can’t be found HTTP ERROR 404". At 44:00, if you refresh your tab, does the same happen?
Hello mate, did you change the paths in the webpack.prod file? And did you setup the baseHrefs to point toward the correct url? :)
@@DevBySeb I am also going to replicate your code today and see if same happens on deployment.
@@DevBySeb Re How would be declare your nginx configuration so that your remote apps are accessible via routing in your host app?
Did it work to replicate it mate?@@nadeemramsing669
Excellent question regarding the nginx config - maybe I should make a tutorial about it (?) as I think it might be to difficult to explain in the comments here (also it differs based on deploy-approach) @@nadeemramsing669
Hi, I got stuck at the very beginning of this video (10 minutes). When I try to run the host locally, everything compiles correctly, but I get an error in the browser console: TypeError: Cannot read properties of undefined (reading 'call') and Cannot use import statement outside a module (at styles.js:1:1). From what I see, the problem is quite old, but no one gave the correct solution. I'm using Angular 16 and node 20
Thanks for sharing mate. I haven’t seen that issue before, are you serving the application in the same way as I do?
@@DevBySeb Yes, I do everything just like you. This error does not appear when I use CLI commands to create components (eg nx g @nx/angular:host dashboard). It's very strange. it seems that the NX generator in VSC is not working properly for me, or I have the wrong configuration for the NX generator :/
Hello Sebastian when I create my remote application I am not able to see my entry.module.ts file please help my node version is 18.18.1
Hello mate, is it possible for you to test the same versions as I use in the video?
Have you already sent the project made with nx to sonarqube?
This existing project or projects in general?
@@DevBySeb Projects created in the Angular console, using modularization, I tried to use the project from the official documentation with the Angular library, but I was unable to send it to sonarqube
@@arozendojr we are utilizing sonarqube for scanning with quality gates set up, which runs in our CI pipeline per pull request level. We utilize an npm package to publish it. I believe its called sonarscanner or something similar. So it is possible.
@@DevBySeb My problem is nx creating an angular library, I would like to send everything from git to sonarquibe, I discovered that the angular library is a complete project, a separate directory in sonarquibe is mandatory
where is the rest of the screen 😶
Thanks for the feedback mate, I’ll try to improve on that front 🙏🏼