This content originally appeared on Bits and Pieces - Medium and was authored by Hardique Dasore
A step-by-step guide to adopting a micro frontend architecture for your frontend application in Angular.
If you are working on an Angular project with a large codebase that is shared among multiple teams, you may want to think about switching to a micro frontend architecture using module federation. This approach can help you break down your monolithic application into smaller, more manageable parts, making it easier to develop and deploy.
Micro-frontend architecture is an approach to building web applications that involves breaking down a monolithic codebase into smaller, independent modules. Each module, or micro-frontend, is developed and deployed independently, and multiple teams can work on different micro-frontends simultaneously.
In this article, we’ll go through the steps involved in adopting micro-frontend architecture for a frontend application in Angular.
Let’s begin.
- The first step to adopting micro-frontend architecture is to create separate containers for each micro-frontend. Containers are independent modules that contain their own components and services.
Create an nx-workspace using:
npx create-nx-workspace@latest <project name>
• Select angular and scss
2. Change the directory to the project folder using:
cd <project name>
3. Open Visual Studio code using:
code .
4. Create separate containers using:
nx generate @nrwl/angular:app <container name>
5. Compile and run all containers using:
nx run <container name>:serve:development - port <port>
Note: You can also use ng instead of nx
6. Use the following command to create new components:
nx generate @nrwl/angular:component <component name> - project <project name>
7. Next is setting up module federation in all containers. But before going into the code, you should know what module federation is. It’s basically a technique that enables you to share components and services across different micro-frontends.
Now, set up module federation in all containers with the following code:
npm i @angular-architects/module-federation
8. Run the following command to add webconfig file to all the containers:
ng g @angular-architects/module-federation:init
• Select container and assign port
9. Expose the component you want to use in other containers in webpack.config.js:
exposes: {
'./Module': './apps/<container-name>/src/app/remote-entry/remote-entry.module.ts',
},10. Use the exposed module in the routing of app.module.ts of the shell container:
RouterModule.forRoot(
[
{
path: '<container-name>',
loadChildren: () =>
loadRemoteModule({
remoteEntry: 'http://localhost:<port>/remoteEntry.js',
type: 'module',
exposedModule: './Module',
}).then((m) => m.RemoteEntryModule),
}
],
{ initialNavigation: 'enabledBlocking' }
)
],
11. In order to create a shared service in a shared folder, use:
ng g @nrwl/angular:lib shared/test-service
12. Install ngx-mfe (version 3.0.2):
npm i ngx-mfe
13. Create index.ts file and import:
export * from './lib/shared-test-service.module';
export * from './lib/test-service.service';
14. Add the path to tsconfig.base.json:
"paths": {
"@micro-frontends/shared/test-service": ["libs/shared/test-service/src/index.ts"]
}15. Add the shared service to the webpack.config.js file of the container you want to use the service in:
sharedMappings.register(sharedMappings.register(
path.join(__dirname, '../../tsconfig.base.json'),
path.join(__dirname,'../../tsconfig.base.json'),
[/* mapped paths to share */]);
['@micro-frontends/shared/shared/test-service']);]);
16. In order to use the service, import it into the component:
import{{ TestService }} from '@micro-frontends/shared/test-service'Note: Please change micro-frontends to the name of your project and test-service to the name of your service in the above commands.
Using micro-frontends comes with several benefits such as faster development cycles, better scalability, and easier maintenance. But it’s worth mentioning that managing multiple components in a micro-frontend architecture can be a challenge, especially when working with multiple teams or projects. Hence, your decision of adopting a micro-frontend architecture should ideally depend on the project you’re dealing with.
💡 Pro Tip: 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.
Find out more:
That’s it for this topic. Thank you for reading.
Happy Coding!
Build Angular Apps with reusable components, just like Lego
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
How to Adopt a Micro Frontend Architecture for Angular Applications 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 Hardique Dasore
Hardique Dasore | Sciencx (2023-03-21T07:13:04+00:00) How to Adopt a Micro Frontend Architecture for Angular Applications. Retrieved from https://www.scien.cx/2023/03/21/how-to-adopt-a-micro-frontend-architecture-for-angular-applications/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.