docs(misc): add module-federeation concepts section (#19684)

This commit is contained in:
Colum Ferry 2023-10-18 20:24:12 +01:00 committed by GitHub
parent 0b0df51263
commit 0c4889b328
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 289 additions and 224 deletions

View File

@ -809,6 +809,31 @@
"children": [], "children": [],
"disableCollapsible": false "disableCollapsible": false
}, },
{
"name": "Module Federation",
"path": "/concepts/module-federation",
"id": "module-federation",
"isExternal": false,
"children": [
{
"name": "Faster Builds with Module Federation",
"path": "/concepts/module-federation/faster-builds-with-module-federation",
"id": "faster-builds-with-module-federation",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Micro Frontend Architecture",
"path": "/concepts/module-federation/micro-frontend-architecture",
"id": "micro-frontend-architecture",
"isExternal": false,
"children": [],
"disableCollapsible": false
}
],
"disableCollapsible": false
},
{ {
"name": "More Concepts", "name": "More Concepts",
"path": "/concepts/more-concepts", "path": "/concepts/more-concepts",
@ -911,22 +936,6 @@
"children": [], "children": [],
"disableCollapsible": false "disableCollapsible": false
}, },
{
"name": "Micro Frontend Architecture",
"path": "/concepts/more-concepts/micro-frontend-architecture",
"id": "micro-frontend-architecture",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Faster Builds with Module Federation",
"path": "/concepts/more-concepts/faster-builds-with-module-federation",
"id": "faster-builds-with-module-federation",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{ {
"name": "Applications and Libraries", "name": "Applications and Libraries",
"path": "/concepts/more-concepts/applications-and-libraries", "path": "/concepts/more-concepts/applications-and-libraries",
@ -1053,6 +1062,47 @@
"children": [], "children": [],
"disableCollapsible": false "disableCollapsible": false
}, },
{
"name": "Module Federation",
"path": "/concepts/module-federation",
"id": "module-federation",
"isExternal": false,
"children": [
{
"name": "Faster Builds with Module Federation",
"path": "/concepts/module-federation/faster-builds-with-module-federation",
"id": "faster-builds-with-module-federation",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Micro Frontend Architecture",
"path": "/concepts/module-federation/micro-frontend-architecture",
"id": "micro-frontend-architecture",
"isExternal": false,
"children": [],
"disableCollapsible": false
}
],
"disableCollapsible": false
},
{
"name": "Faster Builds with Module Federation",
"path": "/concepts/module-federation/faster-builds-with-module-federation",
"id": "faster-builds-with-module-federation",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Micro Frontend Architecture",
"path": "/concepts/module-federation/micro-frontend-architecture",
"id": "micro-frontend-architecture",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{ {
"name": "More Concepts", "name": "More Concepts",
"path": "/concepts/more-concepts", "path": "/concepts/more-concepts",
@ -1155,22 +1205,6 @@
"children": [], "children": [],
"disableCollapsible": false "disableCollapsible": false
}, },
{
"name": "Micro Frontend Architecture",
"path": "/concepts/more-concepts/micro-frontend-architecture",
"id": "micro-frontend-architecture",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Faster Builds with Module Federation",
"path": "/concepts/more-concepts/faster-builds-with-module-federation",
"id": "faster-builds-with-module-federation",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{ {
"name": "Applications and Libraries", "name": "Applications and Libraries",
"path": "/concepts/more-concepts/applications-and-libraries", "path": "/concepts/more-concepts/applications-and-libraries",
@ -1334,22 +1368,6 @@
"children": [], "children": [],
"disableCollapsible": false "disableCollapsible": false
}, },
{
"name": "Micro Frontend Architecture",
"path": "/concepts/more-concepts/micro-frontend-architecture",
"id": "micro-frontend-architecture",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Faster Builds with Module Federation",
"path": "/concepts/more-concepts/faster-builds-with-module-federation",
"id": "faster-builds-with-module-federation",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{ {
"name": "Applications and Libraries", "name": "Applications and Libraries",
"path": "/concepts/more-concepts/applications-and-libraries", "path": "/concepts/more-concepts/applications-and-libraries",

View File

@ -1004,6 +1004,42 @@
"path": "/concepts/affected", "path": "/concepts/affected",
"tags": ["run-tasks"] "tags": ["run-tasks"]
}, },
{
"id": "module-federation",
"name": "Module Federation",
"description": "Understand more about Module Federation with NX",
"file": "",
"itemList": [
{
"id": "faster-builds-with-module-federation",
"name": "Faster Builds with Module Federation",
"description": "",
"file": "shared/guides/module-federation/faster-builds",
"itemList": [],
"isExternal": false,
"path": "/concepts/module-federation/faster-builds-with-module-federation",
"tags": [
"use-task-executors",
"module-federation",
"angular",
"react"
]
},
{
"id": "micro-frontend-architecture",
"name": "Micro Frontend Architecture",
"description": "",
"file": "shared/guides/module-federation/micro-frontend-architecture",
"itemList": [],
"isExternal": false,
"path": "/concepts/module-federation/micro-frontend-architecture",
"tags": []
}
],
"isExternal": false,
"path": "/concepts/module-federation",
"tags": []
},
{ {
"id": "more-concepts", "id": "more-concepts",
"name": "More Concepts", "name": "More Concepts",
@ -1130,31 +1166,6 @@
"path": "/concepts/more-concepts/nx-devkit-angular-devkit", "path": "/concepts/more-concepts/nx-devkit-angular-devkit",
"tags": ["create-your-own-plugin"] "tags": ["create-your-own-plugin"]
}, },
{
"id": "micro-frontend-architecture",
"name": "Micro Frontend Architecture",
"description": "",
"file": "shared/guides/module-federation/micro-frontend-architecture",
"itemList": [],
"isExternal": false,
"path": "/concepts/more-concepts/micro-frontend-architecture",
"tags": []
},
{
"id": "faster-builds-with-module-federation",
"name": "Faster Builds with Module Federation",
"description": "",
"file": "shared/guides/module-federation/faster-builds",
"itemList": [],
"isExternal": false,
"path": "/concepts/more-concepts/faster-builds-with-module-federation",
"tags": [
"use-task-executors",
"module-federation",
"angular",
"react"
]
},
{ {
"id": "applications-and-libraries", "id": "applications-and-libraries",
"name": "Applications and Libraries", "name": "Applications and Libraries",
@ -1315,6 +1326,57 @@
"path": "/concepts/affected", "path": "/concepts/affected",
"tags": ["run-tasks"] "tags": ["run-tasks"]
}, },
"/concepts/module-federation": {
"id": "module-federation",
"name": "Module Federation",
"description": "Understand more about Module Federation with NX",
"file": "",
"itemList": [
{
"id": "faster-builds-with-module-federation",
"name": "Faster Builds with Module Federation",
"description": "",
"file": "shared/guides/module-federation/faster-builds",
"itemList": [],
"isExternal": false,
"path": "/concepts/module-federation/faster-builds-with-module-federation",
"tags": ["use-task-executors", "module-federation", "angular", "react"]
},
{
"id": "micro-frontend-architecture",
"name": "Micro Frontend Architecture",
"description": "",
"file": "shared/guides/module-federation/micro-frontend-architecture",
"itemList": [],
"isExternal": false,
"path": "/concepts/module-federation/micro-frontend-architecture",
"tags": []
}
],
"isExternal": false,
"path": "/concepts/module-federation",
"tags": []
},
"/concepts/module-federation/faster-builds-with-module-federation": {
"id": "faster-builds-with-module-federation",
"name": "Faster Builds with Module Federation",
"description": "",
"file": "shared/guides/module-federation/faster-builds",
"itemList": [],
"isExternal": false,
"path": "/concepts/module-federation/faster-builds-with-module-federation",
"tags": ["use-task-executors", "module-federation", "angular", "react"]
},
"/concepts/module-federation/micro-frontend-architecture": {
"id": "micro-frontend-architecture",
"name": "Micro Frontend Architecture",
"description": "",
"file": "shared/guides/module-federation/micro-frontend-architecture",
"itemList": [],
"isExternal": false,
"path": "/concepts/module-federation/micro-frontend-architecture",
"tags": []
},
"/concepts/more-concepts": { "/concepts/more-concepts": {
"id": "more-concepts", "id": "more-concepts",
"name": "More Concepts", "name": "More Concepts",
@ -1441,26 +1503,6 @@
"path": "/concepts/more-concepts/nx-devkit-angular-devkit", "path": "/concepts/more-concepts/nx-devkit-angular-devkit",
"tags": ["create-your-own-plugin"] "tags": ["create-your-own-plugin"]
}, },
{
"id": "micro-frontend-architecture",
"name": "Micro Frontend Architecture",
"description": "",
"file": "shared/guides/module-federation/micro-frontend-architecture",
"itemList": [],
"isExternal": false,
"path": "/concepts/more-concepts/micro-frontend-architecture",
"tags": []
},
{
"id": "faster-builds-with-module-federation",
"name": "Faster Builds with Module Federation",
"description": "",
"file": "shared/guides/module-federation/faster-builds",
"itemList": [],
"isExternal": false,
"path": "/concepts/more-concepts/faster-builds-with-module-federation",
"tags": ["use-task-executors", "module-federation", "angular", "react"]
},
{ {
"id": "applications-and-libraries", "id": "applications-and-libraries",
"name": "Applications and Libraries", "name": "Applications and Libraries",
@ -1666,26 +1708,6 @@
"path": "/concepts/more-concepts/nx-devkit-angular-devkit", "path": "/concepts/more-concepts/nx-devkit-angular-devkit",
"tags": ["create-your-own-plugin"] "tags": ["create-your-own-plugin"]
}, },
"/concepts/more-concepts/micro-frontend-architecture": {
"id": "micro-frontend-architecture",
"name": "Micro Frontend Architecture",
"description": "",
"file": "shared/guides/module-federation/micro-frontend-architecture",
"itemList": [],
"isExternal": false,
"path": "/concepts/more-concepts/micro-frontend-architecture",
"tags": []
},
"/concepts/more-concepts/faster-builds-with-module-federation": {
"id": "faster-builds-with-module-federation",
"name": "Faster Builds with Module Federation",
"description": "",
"file": "shared/guides/module-federation/faster-builds",
"itemList": [],
"isExternal": false,
"path": "/concepts/more-concepts/faster-builds-with-module-federation",
"tags": ["use-task-executors", "module-federation", "angular", "react"]
},
"/concepts/more-concepts/applications-and-libraries": { "/concepts/more-concepts/applications-and-libraries": {
"id": "applications-and-libraries", "id": "applications-and-libraries",
"name": "Applications and Libraries", "name": "Applications and Libraries",

View File

@ -429,6 +429,13 @@
"name": "Task Pipeline Configuration", "name": "Task Pipeline Configuration",
"path": "/concepts/task-pipeline-configuration" "path": "/concepts/task-pipeline-configuration"
}, },
{
"description": "",
"file": "shared/guides/module-federation/faster-builds",
"id": "faster-builds-with-module-federation",
"name": "Faster Builds with Module Federation",
"path": "/concepts/module-federation/faster-builds-with-module-federation"
},
{ {
"description": "", "description": "",
"file": "shared/incremental-builds", "file": "shared/incremental-builds",
@ -436,13 +443,6 @@
"name": "Incremental Builds", "name": "Incremental Builds",
"path": "/concepts/more-concepts/incremental-builds" "path": "/concepts/more-concepts/incremental-builds"
}, },
{
"description": "",
"file": "shared/guides/module-federation/faster-builds",
"id": "faster-builds-with-module-federation",
"name": "Faster Builds with Module Federation",
"path": "/concepts/more-concepts/faster-builds-with-module-federation"
},
{ {
"description": "", "description": "",
"file": "shared/recipes/module-federation-with-ssr", "file": "shared/recipes/module-federation-with-ssr",
@ -632,6 +632,75 @@
"path": "/recipes/tips-n-tricks/standalone-to-integrated" "path": "/recipes/tips-n-tricks/standalone-to-integrated"
} }
], ],
"module-federation": [
{
"description": "",
"file": "shared/guides/module-federation/faster-builds",
"id": "faster-builds-with-module-federation",
"name": "Faster Builds with Module Federation",
"path": "/concepts/module-federation/faster-builds-with-module-federation"
},
{
"description": "",
"file": "shared/recipes/module-federation-with-ssr",
"id": "module-federation-with-ssr",
"name": "Setup Module Federation with SSR for React",
"path": "/recipes/react/module-federation-with-ssr"
},
{
"description": "",
"file": "shared/recipes/module-federation-with-ssr",
"id": "module-federation-with-ssr",
"name": "Setup Module Federation with SSR for Angular",
"path": "/recipes/angular/module-federation-with-ssr"
},
{
"description": "",
"file": "shared/guides/module-federation/dynamic-mfe-angular",
"id": "dynamic-module-federation-with-angular",
"name": "Advanced Micro Frontends with Angular using Dynamic Federation",
"path": "/recipes/angular/dynamic-module-federation-with-angular"
}
],
"angular": [
{
"description": "",
"file": "shared/guides/module-federation/faster-builds",
"id": "faster-builds-with-module-federation",
"name": "Faster Builds with Module Federation",
"path": "/concepts/module-federation/faster-builds-with-module-federation"
},
{
"description": "",
"file": "shared/recipes/module-federation-with-ssr",
"id": "module-federation-with-ssr",
"name": "Setup Module Federation with SSR for Angular",
"path": "/recipes/angular/module-federation-with-ssr"
},
{
"description": "",
"file": "shared/guides/module-federation/dynamic-mfe-angular",
"id": "dynamic-module-federation-with-angular",
"name": "Advanced Micro Frontends with Angular using Dynamic Federation",
"path": "/recipes/angular/dynamic-module-federation-with-angular"
}
],
"react": [
{
"description": "",
"file": "shared/guides/module-federation/faster-builds",
"id": "faster-builds-with-module-federation",
"name": "Faster Builds with Module Federation",
"path": "/concepts/module-federation/faster-builds-with-module-federation"
},
{
"description": "",
"file": "shared/recipes/module-federation-with-ssr",
"id": "module-federation-with-ssr",
"name": "Setup Module Federation with SSR for React",
"path": "/recipes/react/module-federation-with-ssr"
}
],
"create-your-own-plugin": [ "create-your-own-plugin": [
{ {
"description": "", "description": "",
@ -669,75 +738,6 @@
"path": "/extending-nx/recipes/project-graph-plugins" "path": "/extending-nx/recipes/project-graph-plugins"
} }
], ],
"module-federation": [
{
"description": "",
"file": "shared/guides/module-federation/faster-builds",
"id": "faster-builds-with-module-federation",
"name": "Faster Builds with Module Federation",
"path": "/concepts/more-concepts/faster-builds-with-module-federation"
},
{
"description": "",
"file": "shared/recipes/module-federation-with-ssr",
"id": "module-federation-with-ssr",
"name": "Setup Module Federation with SSR for React",
"path": "/recipes/react/module-federation-with-ssr"
},
{
"description": "",
"file": "shared/recipes/module-federation-with-ssr",
"id": "module-federation-with-ssr",
"name": "Setup Module Federation with SSR for Angular",
"path": "/recipes/angular/module-federation-with-ssr"
},
{
"description": "",
"file": "shared/guides/module-federation/dynamic-mfe-angular",
"id": "dynamic-module-federation-with-angular",
"name": "Advanced Micro Frontends with Angular using Dynamic Federation",
"path": "/recipes/angular/dynamic-module-federation-with-angular"
}
],
"angular": [
{
"description": "",
"file": "shared/guides/module-federation/faster-builds",
"id": "faster-builds-with-module-federation",
"name": "Faster Builds with Module Federation",
"path": "/concepts/more-concepts/faster-builds-with-module-federation"
},
{
"description": "",
"file": "shared/recipes/module-federation-with-ssr",
"id": "module-federation-with-ssr",
"name": "Setup Module Federation with SSR for Angular",
"path": "/recipes/angular/module-federation-with-ssr"
},
{
"description": "",
"file": "shared/guides/module-federation/dynamic-mfe-angular",
"id": "dynamic-module-federation-with-angular",
"name": "Advanced Micro Frontends with Angular using Dynamic Federation",
"path": "/recipes/angular/dynamic-module-federation-with-angular"
}
],
"react": [
{
"description": "",
"file": "shared/guides/module-federation/faster-builds",
"id": "faster-builds-with-module-federation",
"name": "Faster Builds with Module Federation",
"path": "/concepts/more-concepts/faster-builds-with-module-federation"
},
{
"description": "",
"file": "shared/recipes/module-federation-with-ssr",
"id": "module-federation-with-ssr",
"name": "Setup Module Federation with SSR for React",
"path": "/recipes/react/module-federation-with-ssr"
}
],
"environment-variables": [ "environment-variables": [
{ {
"description": "", "description": "",

View File

@ -18,7 +18,9 @@ more [here](/recipes/angular/migration/angular).
## Setting up the Angular plugin ## Setting up the Angular plugin
{% callout type="note" title="Keep Nx Package Versions In Sync" %} {% callout type="note" title="Keep Nx Package Versions In Sync" %}
Make sure to install the `@nx/angular` version that matches the version of `nx` in your repository. If the version numbers get out of sync, you can encounter some difficult to debug errors. You can [fix Nx version mismatches with this recipe](/recipes/tips-n-tricks/keep-nx-versions-in-sync). Make sure to install the `@nx/angular` version that matches the version of `nx` in your repository. If the version
numbers get out of sync, you can encounter some difficult to debug errors. You
can [fix Nx version mismatches with this recipe](/recipes/tips-n-tricks/keep-nx-versions-in-sync).
{% /callout %} {% /callout %}
Adding the Angular plugin to an existing Nx workspace can be done with the following: Adding the Angular plugin to an existing Nx workspace can be done with the following:
@ -97,6 +99,6 @@ nx g @nx/angular:service my-service
- [Angular Nx Tutorial](/getting-started/tutorials/angular-monorepo-tutorial) - [Angular Nx Tutorial](/getting-started/tutorials/angular-monorepo-tutorial)
- [Migrating from the Angular CLI](/recipes/angular/migration/angular) - [Migrating from the Angular CLI](/recipes/angular/migration/angular)
- [Setup Module Federation with Angular and Nx](/concepts/more-concepts/faster-builds-with-module-federation) - [Setup Module Federation with Angular and Nx](/concepts/module-federation/faster-builds-with-module-federation)
- [Upgrading an AngularJS application to Angular](/recipes/angular/migration/angularjs) - [Upgrading an AngularJS application to Angular](/recipes/angular/migration/angularjs)
- [Using Tailwind CSS with Angular projects](/recipes/angular/using-tailwind-css-with-angular-projects) - [Using Tailwind CSS with Angular projects](/recipes/angular/using-tailwind-css-with-angular-projects)

View File

@ -307,6 +307,29 @@
"id": "affected", "id": "affected",
"file": "shared/using-nx/affected" "file": "shared/using-nx/affected"
}, },
{
"name": "Module Federation",
"id": "module-federation",
"description": "Understand more about Module Federation with NX",
"itemList": [
{
"name": "Faster Builds with Module Federation",
"id": "faster-builds-with-module-federation",
"tags": [
"use-task-executors",
"module-federation",
"angular",
"react"
],
"file": "shared/guides/module-federation/faster-builds"
},
{
"name": "Micro Frontend Architecture",
"id": "micro-frontend-architecture",
"file": "shared/guides/module-federation/micro-frontend-architecture"
}
]
},
{ {
"name": "More Concepts", "name": "More Concepts",
"id": "more-concepts", "id": "more-concepts",
@ -377,22 +400,6 @@
"tags": ["create-your-own-plugin"], "tags": ["create-your-own-plugin"],
"file": "shared/guides/nx-devkit-angular-devkit" "file": "shared/guides/nx-devkit-angular-devkit"
}, },
{
"name": "Micro Frontend Architecture",
"id": "micro-frontend-architecture",
"file": "shared/guides/module-federation/micro-frontend-architecture"
},
{
"name": "Faster Builds with Module Federation",
"id": "faster-builds-with-module-federation",
"tags": [
"use-task-executors",
"module-federation",
"angular",
"react"
],
"file": "shared/guides/module-federation/faster-builds"
},
{ {
"name": "Applications and Libraries", "name": "Applications and Libraries",
"id": "applications-and-libraries", "id": "applications-and-libraries",

View File

@ -440,7 +440,8 @@ first before building the remotes.
## Summary ## Summary
You could use Module Federation to implement [micro frontends](/concepts/more-concepts/micro-frontend-architecture), but this You could use Module Federation to implement [micro frontends](/concepts/module-federation/micro-frontend-architecture),
but this
guide showed how to use it to speed up your builds. guide showed how to use it to speed up your builds.
Module Federation allows you to split a single build process into multiple processes which can run in parallel or even Module Federation allows you to split a single build process into multiple processes which can run in parallel or even

View File

@ -1,9 +1,13 @@
# Micro Frontend Architecture # Micro Frontend Architecture
Since version 14, Nx provides out-of-the-box [Module Federation](/concepts/more-concepts/faster-builds-with-module-federation) support to both React Since version 14, Nx provides
and Angular. The Micro Frontend (MFE) architecture builds on top of Module Federation by providing _independent deployability_. out-of-the-box [Module Federation](/concepts/module-federation/faster-builds-with-module-federation) support to both
React
and Angular. The Micro Frontend (MFE) architecture builds on top of Module Federation by providing _independent
deployability_.
If you have not read the [Module Federation guide](/concepts/more-concepts/faster-builds-with-module-federation) yet, we recommend that you read it If you have not read the [Module Federation guide](/concepts/module-federation/faster-builds-with-module-federation)
yet, we recommend that you read it
before continuing with this MFE guide. before continuing with this MFE guide.
## When should I use micro frontend architecture? ## When should I use micro frontend architecture?
@ -17,9 +21,10 @@ of MFEs and decide whether it makes sense for your own teams.
logic that breaks compatibility with remotes. logic that breaks compatibility with remotes.
If you are looking at optimizing builds and do not need independent deployments, we recommend reading our guide on If you are looking at optimizing builds and do not need independent deployments, we recommend reading our guide on
[Faster Builds with Module Federation](/concepts/more-concepts/faster-builds-with-module-federation). [Faster Builds with Module Federation](/concepts/module-federation/faster-builds-with-module-federation).
If you need to use MFEs, keep reading, and we'll examine the architecture and strategies to deal with shared libraries and If you need to use MFEs, keep reading, and we'll examine the architecture and strategies to deal with shared libraries
and
deployments. deployments.
## Architectural overview ## Architectural overview
@ -29,7 +34,8 @@ With MFE architecture, a large application is split into:
1. A single **Host** application that references external... 1. A single **Host** application that references external...
2. **Remote** applications, which handle a single domain or feature. 2. **Remote** applications, which handle a single domain or feature.
In a normal Module Federation setup, we [recommend setting up implicit dependencies](/concepts/more-concepts/faster-builds-with-module-federation#architectural-overview) In a normal Module Federation setup,
we [recommend setting up implicit dependencies](/concepts/module-federation/faster-builds-with-module-federation#architectural-overview)
from the host application to remote applications. However, in an MFE architecture you _do not_ want these dependencies from the host application to remote applications. However, in an MFE architecture you _do not_ want these dependencies
to exist between host and remotes. to exist between host and remotes.

View File

@ -27,7 +27,8 @@ On the other hand, the executor of a **buildable library**, performs a subset of
nx g @nx/react:lib mylib --buildable nx g @nx/react:lib mylib --buildable
``` ```
Read more about [Publishable and Buildable Nx Libraries here.](/concepts/more-concepts/buildable-and-publishable-libraries) Read more
about [Publishable and Buildable Nx Libraries here.](/concepts/more-concepts/buildable-and-publishable-libraries)
## Nx computation cache and Nx Cloud ## Nx computation cache and Nx Cloud
@ -78,7 +79,7 @@ But there are other ways to make the build process incremental. One of them is u
When using WebPack Module Federation, you split the application into multiple webpack builds. Imagine the application has 3 big sections, and they are built using 3 webpack builds: `W1`, `W2`, and `W3`. Each of them has to build shared code in addition to building the corresponding application section code. So the time it takes to build all of them (`W1` + `W2` + `W3`) will be greater than `W`. However, if you change only Section 1, you will only need to run `W1`. `W2` and `W3` will be retrieved from cache. In addition, `W1`, `W2`, and `W3` can run on separate machines. Because of that, both the CI time and the local serve time can be drastically reduced. When using WebPack Module Federation, you split the application into multiple webpack builds. Imagine the application has 3 big sections, and they are built using 3 webpack builds: `W1`, `W2`, and `W3`. Each of them has to build shared code in addition to building the corresponding application section code. So the time it takes to build all of them (`W1` + `W2` + `W3`) will be greater than `W`. However, if you change only Section 1, you will only need to run `W1`. `W2` and `W3` will be retrieved from cache. In addition, `W1`, `W2`, and `W3` can run on separate machines. Because of that, both the CI time and the local serve time can be drastically reduced.
Learn more: [Faster Builds with Module Federation](/concepts/more-concepts/faster-builds-with-module-federation) Learn more: [Faster Builds with Module Federation](/concepts/module-federation/faster-builds-with-module-federation)
## See Also ## See Also

View File

@ -18,7 +18,9 @@ more [here](/recipes/angular/migration/angular).
## Setting up the Angular plugin ## Setting up the Angular plugin
{% callout type="note" title="Keep Nx Package Versions In Sync" %} {% callout type="note" title="Keep Nx Package Versions In Sync" %}
Make sure to install the `@nx/angular` version that matches the version of `nx` in your repository. If the version numbers get out of sync, you can encounter some difficult to debug errors. You can [fix Nx version mismatches with this recipe](/recipes/tips-n-tricks/keep-nx-versions-in-sync). Make sure to install the `@nx/angular` version that matches the version of `nx` in your repository. If the version
numbers get out of sync, you can encounter some difficult to debug errors. You
can [fix Nx version mismatches with this recipe](/recipes/tips-n-tricks/keep-nx-versions-in-sync).
{% /callout %} {% /callout %}
Adding the Angular plugin to an existing Nx workspace can be done with the following: Adding the Angular plugin to an existing Nx workspace can be done with the following:
@ -97,6 +99,6 @@ nx g @nx/angular:service my-service
- [Angular Nx Tutorial](/getting-started/tutorials/angular-monorepo-tutorial) - [Angular Nx Tutorial](/getting-started/tutorials/angular-monorepo-tutorial)
- [Migrating from the Angular CLI](/recipes/angular/migration/angular) - [Migrating from the Angular CLI](/recipes/angular/migration/angular)
- [Setup Module Federation with Angular and Nx](/concepts/more-concepts/faster-builds-with-module-federation) - [Setup Module Federation with Angular and Nx](/concepts/module-federation/faster-builds-with-module-federation)
- [Upgrading an AngularJS application to Angular](/recipes/angular/migration/angularjs) - [Upgrading an AngularJS application to Angular](/recipes/angular/migration/angularjs)
- [Using Tailwind CSS with Angular projects](/recipes/angular/using-tailwind-css-with-angular-projects) - [Using Tailwind CSS with Angular projects](/recipes/angular/using-tailwind-css-with-angular-projects)

View File

@ -157,7 +157,8 @@ module.exports = composePlugins(withNx(), (config, { options, context }) => {
### Configure webpack for Module Federation ### Configure webpack for Module Federation
If you use the [Module Federation](/concepts/more-concepts/faster-builds-with-module-federation) support from `@nx/angular` or `@nx/react` then If you use the [Module Federation](/concepts/module-federation/faster-builds-with-module-federation) support
from `@nx/angular` or `@nx/react` then
you can customize your webpack configuration as follows. you can customize your webpack configuration as follows.
```js {% fileName="apps/my-app/webpack.config.js" %} ```js {% fileName="apps/my-app/webpack.config.js" %}

View File

@ -165,7 +165,7 @@ module.exports = composePlugins(
The `withModuleFederation` and `withModuleFederationForSSR` plugins add module federation support to the webpack build. These plugins use The `withModuleFederation` and `withModuleFederationForSSR` plugins add module federation support to the webpack build. These plugins use
[`ModuleFederationPlugin`](https://webpack.js.org/concepts/module-federation/) and provide a simpler API through Nx. [`ModuleFederationPlugin`](https://webpack.js.org/concepts/module-federation/) and provide a simpler API through Nx.
For more information, refer to the [Module Federation recipe](/concepts/more-concepts/faster-builds-with-module-federation). For more information, refer to the [Module Federation recipe](/concepts/module-federation/faster-builds-with-module-federation).
### Options ### Options

View File

@ -137,5 +137,5 @@ To serve the `store` application and watch for changes on the `checkout` applica
To learn more about Module Federation, we have some resources you might find useful: To learn more about Module Federation, we have some resources you might find useful:
- [Guide: Faster Builds with Module Federation](/concepts/more-concepts/faster-builds-with-module-federation) - [Guide: Faster Builds with Module Federation](/concepts/module-federation/faster-builds-with-module-federation)
- [Video: Speed up your Angular serve and build times with Module Federation and Nx](https://www.youtube.com/watch?v=JkcaGzhRjkc) - [Video: Speed up your Angular serve and build times with Module Federation and Nx](https://www.youtube.com/watch?v=JkcaGzhRjkc)

View File

@ -52,6 +52,9 @@
- [Improve Worst Case CI Times](/concepts/dte) - [Improve Worst Case CI Times](/concepts/dte)
- [Task Pipeline Configuration](/concepts/task-pipeline-configuration) - [Task Pipeline Configuration](/concepts/task-pipeline-configuration)
- [Affected](/concepts/affected) - [Affected](/concepts/affected)
- [Module Federation](/concepts/module-federation)
- [Faster Builds with Module Federation](/concepts/module-federation/faster-builds-with-module-federation)
- [Micro Frontend Architecture](/concepts/module-federation/micro-frontend-architecture)
- [More Concepts](/concepts/more-concepts) - [More Concepts](/concepts/more-concepts)
- [Customizing Inputs](/concepts/more-concepts/customizing-inputs) - [Customizing Inputs](/concepts/more-concepts/customizing-inputs)
- [Incremental Builds](/concepts/more-concepts/incremental-builds) - [Incremental Builds](/concepts/more-concepts/incremental-builds)
@ -65,8 +68,6 @@
- [Nx and the Angular CLI](/concepts/more-concepts/nx-and-angular) - [Nx and the Angular CLI](/concepts/more-concepts/nx-and-angular)
- [Folder Structure](/concepts/more-concepts/folder-structure) - [Folder Structure](/concepts/more-concepts/folder-structure)
- [Nx Devkit and Angular Devkit](/concepts/more-concepts/nx-devkit-angular-devkit) - [Nx Devkit and Angular Devkit](/concepts/more-concepts/nx-devkit-angular-devkit)
- [Micro Frontend Architecture](/concepts/more-concepts/micro-frontend-architecture)
- [Faster Builds with Module Federation](/concepts/more-concepts/faster-builds-with-module-federation)
- [Applications and Libraries](/concepts/more-concepts/applications-and-libraries) - [Applications and Libraries](/concepts/more-concepts/applications-and-libraries)
- [Creating Libraries](/concepts/more-concepts/creating-libraries) - [Creating Libraries](/concepts/more-concepts/creating-libraries)
- [Library Types](/concepts/more-concepts/library-types) - [Library Types](/concepts/more-concepts/library-types)

View File

@ -661,7 +661,7 @@ const packagesDocuments = {
}; };
/** /**
* Concept documents Updates (updated 2023-03-31) * Concept documents Updates (updated 2023-10-18)
*/ */
const conceptUrls = { const conceptUrls = {
'/concepts/more-concepts/global-nx': '/concepts/more-concepts/global-nx':
@ -674,6 +674,10 @@ const conceptUrls = {
'/getting-started/tutorials/react-standalone-tutorial', '/getting-started/tutorials/react-standalone-tutorial',
'/getting-started/angular-standalone-tutorial': '/getting-started/angular-standalone-tutorial':
'/getting-started/tutorials/angular-standalone-tutorial', '/getting-started/tutorials/angular-standalone-tutorial',
'/concepts/more-concepts/micro-frontend-architecture':
'/concepts/module-federation/micro-frontend-architecture',
'/concepts/more-concepts/faster-builds-with-module-federation':
'/concepts/module-federation/faster-builds-with-module-federation',
}; };
const nested5minuteTutorialUrls = { const nested5minuteTutorialUrls = {