This content originally appeared on Bits and Pieces - Medium and was authored by Deepanshu Tiwari
Explaining different aspects
Module federation is a feature of webpack 5 that allows developers to share code across multiple applications. With this feature, you can create micro frontends that are independently developed and deployed, yet still, work together to form a single application.
To implement micro frontends using module federation in Angular, you can follow these steps:
- Create multiple Angular applications that will be used as micro frontends.
// Create Application 1
ng new app1
// Create Application 2
ng new app2
// Create Application 3
ng new app3
2. Enable module federation in the webpack configuration of each application.
// app1 webpack config
module.exports = {
...
plugins: [
new ModuleFederationPlugin({
name: 'app1',
library: { type: 'var', name: 'app1' },
filename: 'remoteEntry.js',
exposes: {
'./App1Module': './src/app/app.module.ts'
}
})
]
}
// app2 webpack config
module.exports = {
...
plugins: [
new ModuleFederationPlugin({
name: 'app2',
library: { type: 'var', name: 'app2' },
filename: 'remoteEntry.js',
exposes: {
'./App2Module': './src/app/app.module.ts'
}
})
]
}
// app3 webpack config
module.exports = {
...
plugins: [
new ModuleFederationPlugin({
name: 'app3',
library: { type: 'var', name: 'app3' },
filename: 'remoteEntry.js',
exposes: {
'./App3Module': './src/app/app.module.ts'
}
})
]
}
In this code, we are configuring the webpack module federation plugin for app1 app2 app3. The name property specifies the unique name of the micro frontend, which will be used to identify it when it is consumed by the main application. In this example, we set the name to app1 app2 app3.
The library property specifies how the micro frontend should expose its modules. In this example, we set the type to 'var', which means that the module will be exposed as a global variable with the name app1 app2 app3. The filename property specifies the name of the remote entry file that will be generated by webpack.
Finally, the exposes property specifies which modules should be exposed by the micro frontend. In this example, we are exposing the App1Module from the app.module.ts file in the src/app directory.
3. Configure the applications to expose certain modules that can be used by other applications.
// app1 exposes AppComponent to be used by other applications
@NgModule({
declarations: [AppComponent],
exports: [AppComponent]
})
export class App1Module { }
// app2 exposes HeaderComponent to be used by other applications
@NgModule({
declarations: [HeaderComponent],
exports: [HeaderComponent]
})
export class App2Module { }
// app3 exposes FooterComponent to be used by other applications
@NgModule({
declarations: [FooterComponent],
exports: [FooterComponent]
})
export class App3Module { }
4. In the main application, configure module federation to consume the modules exposed by the micro frontends.
// main app webpack config
module.exports = {
...
plugins: [
new ModuleFederationPlugin({
remotes: {
app1: 'app1',
app2: 'app2',
app3: 'app3'
}
})
]
}
/*In above code, we are configuring the webpack module federation plugin
for the main application. The remotes property is used to specify which micro
frontends we want to consume. In this case, we are consuming the micro
frontends named app1, app2, and app3. The value for each remote specifies
where the micro frontend can be found. In this example, we assume that each
micro frontend is available at its own domain or subdomain.*/
// Use the shared modules in the main application to create a seamless user experience
import { AppComponent } from 'app1/App1Module';
import { HeaderComponent } from 'app2/App2Module';
import { FooterComponent } from 'app3/App3Module';
@NgModule({
declarations: [AppComponent, HeaderComponent, FooterComponent],
imports: [...],
bootstrap: [AppComponent]
})
export class AppModule { }
/*
In above code, we are importing the shared modules that were exposed by
the micro frontends. Each import statement specifies which module to
import and from which micro frontend. We assume that each shared module
is exported from the App1Module, App2Module, and App3Module respectively.
The imported modules are then declared in the declarations array of the
main application's module, so that they can be used in the main
application's components. Finally, the bootstrap property specifies the
component that should be used as the root component of the application.
In this case, we are using the AppComponent from App1Module as the root
component.
*/
5. Use the shared modules in the main application to create a seamless user experience.
// In the main application's routing module, configure routes for the micro frontends
const routes: Routes = [
{ path: 'app1', loadChildren: () => import('app1/App1Module').then(m => m.App1Module) },
{ path: 'app2', loadChildren: () => import('app2/App2Module').then(m => m.App2Module) },
{ path: 'app3', loadChildren: () => import('app3/App3Module').then(m => m.App3Module) }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
In this code, we are defining the routes for the main application that correspond to the micro frontends. For each micro frontend, we define a route that specifies the path and the lazy-loaded module to load. In this example, we assume that the paths for the micro frontends are app1, app2, and app3, and that the lazy-loaded modules are App1Module, App2Module, and App3Module.
The loadChildren function specifies the module to load when the route is activated. The import function is used to dynamically import the module using webpack module federation. When the module is loaded, we retrieve the App1Module, App2Module, or App3Module, depending on the path of the route.
Finally, we import the RouterModule and configure it with the defined routes, which allows us to use the routerLink directive to navigate between the micro frontends.
By configuring routing between the micro frontends, we can create a seamless user experience where the micro frontends are integrated into the main application, and the user can navigate between them without noticing the transition.
💡 Microfrontends are easier when you can apply a component-driven development approach to them. Bit makes this easier by providing an integrated dev environment (compiler, tester, linter, documentation, CI, dev server, and packaging/dependency management/bundler all-in-one) for building apps with Angular. It enables you to quickly set up a dev environment that follows best practices implemented by the Angular team and projects generated by the Angular CLI. Learn more here.
teambit / angular: A development environment for Angular components.
Note: This article covers different aspects of micro frontend development with module federation angular and explains code blocks in simple language. Their are multiple step by step guide present online, please follow them for implementation guide.
keywords: Micro Frontend, Module Federation, Angular, JavaScript, Web development, Frontend architecture, Scalability, Performance, Webpack, Code sharing, Single-page application (SPA).
Build frontend apps with independent components and teams using Micro Frontends
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
→ Micro-Frontends
→ Design System
→ Code-Sharing and reuse
→ Monorepo
Learn more:
- How We Build Micro Frontends
- How we Build a Component Design System
- How to reuse React components across your projects
- 5 Ways to Build a React Monorepo
- How to Create a Composable React App with Bit
Micro Frontend Implementation with Module Federation in Angular was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Deepanshu Tiwari
Deepanshu Tiwari | Sciencx (2023-02-27T07:46:39+00:00) Micro Frontend Implementation with Module Federation in Angular. Retrieved from https://www.scien.cx/2023/02/27/micro-frontend-implementation-with-module-federation-in-angular/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.