About @angular-architects/module-federation

The "@angular-architects/module-federation" package is a groundbreaking solution for Angular developers looking to harness the power of Webpack's Module Federation feature seamlessly within the Angular CLI. This innovative tool effectively allows for micro frontends architecture by enabling multiple, independently deployable Angular applications to share a common platform without sacrificing performance. By utilizing this package, developers can dynamically load different parts of an Angular application at runtime, which significantly reduces the initial load time and optimizes resource usage. This capability is particularly beneficial for large-scale projects and enterprise-level applications where modular development and deployment are crucial.

To start leveraging the benefits of module federation in your Angular projects, the first step is to install the necessary package. You can easily integrate it by running the command "npm install @angular-architects/module-federation" in your project's root directory. This command sets up the module federation capabilities within your Angular application, making it ready to enhance its architectural design and improve scalability. Once installed, the package provides straightforward configuration options that align with Angular's existing ecosystem, ensuring a smooth and efficient development process.

The "@angular-architects/module-federation" not only improves application scalability but also enhances team collaboration by allowing different teams to work independently on separate modules of the same application. This independence helps in faster development cycles, easy updates, and better maintenance of the codebase. Furthermore, the package supports lazy loading of modules, which means that the application loads modules only when they are needed, thereby boosting the performance and user experience. This strategic approach to loading and code sharing makes it an essential tool for developers aiming to create high-performing, scalable, and maintainable Angular applications.

angular-architects npm packages

Find the best node modules for your project.

Search npm

@angular-architects/module-federation

Seamlessly using Webpack Module Federation with the Angular CLI...

Dependencies

Core dependencies of this npm package and its dev dependencies.

@angular/animations, @angular/common, @angular/compiler, @angular/core, @angular/forms, @angular/platform-browser, @angular/platform-browser-dynamic, @angular/router, @module-federation/vite, es-module-shims, rxjs, tslib, zone.js, @angular-devkit/build-angular, @angular-devkit/core, @angular-devkit/schematics, @angular-eslint/eslint-plugin, @angular-eslint/eslint-plugin-template, @angular-eslint/template-parser, @angular/cli, @angular/compiler-cli, @angular/language-service, @nx/angular, @nx/cypress, @nx/devkit, @nx/eslint, @nx/eslint-plugin, @nx/jest, @nx/js, @nx/node, @nx/plugin, @nx/webpack, @nx/workspace, @rollup/plugin-commonjs, @rollup/plugin-json, @rollup/plugin-node-resolve, @rollup/plugin-replace, @schematics/angular, @swc-node/register, @swc/cli, @swc/core, @swc/helpers, @types/browser-sync, @types/cross-spawn, @types/jest, @types/node, @types/npmlog, @typescript-eslint/eslint-plugin, @typescript-eslint/parser, acorn, autoprefixer, browser-sync, callsite, chalk, chokidar, cross-spawn, cypress, dotenv, esbuild, eslint, eslint-config-prettier, eslint-plugin-cypress, jest, jest-environment-jsdom, jest-environment-node, jest-preset-angular, json5, jsonc-eslint-parser, mrmime, ng-packagr, node-fetch, node-watch, npmlog, nx, postcss, postcss-import, postcss-preset-env, postcss-url, pre-commit, prettier, rollup, rollup-plugin-esbuild, rollup-plugin-node-externals, semver, ts-jest, ts-node, typescript, verdaccio, word-wrap

Documentation

A README file for the @angular-architects/module-federation code repository. View Code

@angular-architects/module-federation

Local Development

Playground App

You can test directly the libraries by using the playground application:

Start the host application:
```
npx nx run playground:serve
```
Start the remote application:
```
npx nx run mfe1:serve --port 3001
```

By using that approach you can test your modifications on the libraries.

Test Library on external repository

If you want to test the modifications directly on your application, you can follow the steps:

Start the local registry Verdaccio:
```
npx nx run local-registry
```
Then you can publish the libraries by using:

For Module federation:
```
npm run publish-local:mf
```
For Native federation:
```
npm run publish-local:nf
```
This will first build the libraries and publish them to http://localhost:4873

Then just re-run the install on the other repo with you favorite package manager.

By default, the version from the package.json will be used. However, you can provide the version for a specific library by using:

npx nx run native-federation:publish-local -- --ver=17.0.8

Publish Libraries

Follow these steps to publish all libraries on npm:

For Module federation:
```
npm run publish:mf
```
For Native federation:
```
npm run publish:nf
```
This will first build the libraries and publish them to npm registry.

By default, the version from the package.json will be used and the tag will be next. However, you can provide the version and the tag for a specific library by using:

npx nx run native-federation:publish -- --ver=17.0.8 --tag=latest