{"id":4635,"date":"2020-11-26T00:01:24","date_gmt":"2020-11-25T23:01:24","guid":{"rendered":"https:\/\/www.angulararchitects.io\/?p=4635"},"modified":"2024-01-19T15:17:42","modified_gmt":"2024-01-19T14:17:42","slug":"using-module-federation-with-monorepos-and-angular","status":"publish","type":"post","link":"https:\/\/www.angulararchitects.io\/en\/blog\/using-module-federation-with-monorepos-and-angular\/","title":{"rendered":"Using Module Federation with (Nx) Monorepos and Angular"},"content":{"rendered":"
\n\t\t\t\n\t\n\t\n\t\t

\n\t\t\tThis is post 6 of 10 in the series “Module Federation”<\/em>\t\t<\/p>\n\t\t\t<\/label>\n\n\t\t\t

\n\t\t\t
    \n\t\t\t\t\t\t\t\t\t
  1. The Microfrontend Revolution: Module Federation in Webpack 5<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  2. The Microfrontend Revolution: Module Federation with Angular<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  3. Dynamic Module Federation with Angular<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  4. Building A Plugin-based Workflow Designer With Angular and Module Federation<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  5. Getting Out of Version-Mismatch-Hell with Module Federation<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  6. Using Module Federation with (Nx) Monorepos and Angular<\/span><\/li>\n\t\t\t\t\t\t\t\t\t
  7. Pitfalls with Module Federation and Angular<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  8. Multi-Framework and -Version Micro Frontends with Module Federation: Your 4 Steps Guide<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  9. Module Federation with Angular’s Standalone Components<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  10. What’s New in our Module Federation Plugin 14.3?<\/a><\/li>\n\t\t\t\t\t\t\t<\/ol>\n\t\t<\/div>\n\t<\/div>\n

    Using Module Federation with Nx Monorepos and Angular<\/h1>\n

    While it sounds like a contradiction, the combination of Micro Frontends and Monorepos can actually be quite tempting: No version conflicts<\/strong> by design, easy code sharing and optimized bundles<\/strong> are some of the benefits you get. Also, you can still deploy<\/strong> Micro Frontends separately<\/strong> and isolate<\/strong> them from each other. <\/p>\n<\/p>\n

    This article compares the consequences<\/strong> of using several repositories<\/strong> ("Micro Frontends by the book") and one sole monorepo<\/strong>. After that, it shows with an example, how to use Module Federation in an Nx monorepo.<\/p>\n

    If you want to have a look at the \ud83d\udcc2 source code<\/a> used here, you can check out this repository<\/a>. <\/p>\n

    \n

    Big thanks to the awesome Tobias Koppers<\/a> who gave me valuable insights into this topic and to the one and only Dmitriy Shekhovtsov<\/a> who helped me using the Angular CLI\/webpack 5 integration for this.<\/p>\n<\/blockquote>\n

    Important<\/strong>: This article is written for Angular 14.x<\/strong> and higher. Hence, you also need Nx 14.2.x<\/strong> or higher. To find out about the small differences for lower versions of Angular and for the migration from such a lower version, please have a look to our migration guide<\/a>.<\/p>\n

    Multiple Repos vs. Monorepos<\/h2>\n

    I know, the discussion about using multiple repos vs. monorepos can be quite emotional. Different people made different experiences with both approaches. However, I can tell you: I've seen both working in huge real-world projects. Still, both comes with different consequences<\/strong>, I'm going to discuss in the following two section. <\/p>\n

    At the end of the day, you need to evaluate<\/strong> these consequences against your very project situation and goals<\/strong>. This is what software architecture is about.<\/p>\n

    Multiple Repositories: Micro Frontends by the Book<\/h2>\n

    A traditional approach uses a separate repository per Micro Frontend:<\/p>\n

    \"One<\/p>\n

    This is also a quite usual for Micro Services and it provides the following advantages<\/strong>:<\/p>\n