Questions tagged [micro-frontend]

In a micro-frontend architecture, the user interface is divided into multiple self-contained micro-applications, each responsible for a specific functionality or feature. These micro-applications can be developed using different technologies, frameworks, or programming languages, depending on the team's preferences and requirements.

One of the key benefits of micro-frontends is the ability to decouple frontend development, allowing teams to work autonomously and adopt different technologies as needed. This flexibility enables independent deployment and scalability of individual micro-applications, reducing the risk of regressions and minimizing the impact of changes.

Micro-frontends can communicate and collaborate with each other through well-defined APIs or by leveraging shared data stores or events. This allows seamless integration and coordination between different micro-applications, providing a unified and cohesive user experience.

Another advantage of micro-frontends is their potential for reusability. Teams can develop common UI components, styles, and utilities that can be shared across micro-applications, promoting consistency and reducing duplication of effort. This reusability also facilitates maintenance and updates, as changes made to shared components can be automatically propagated to all micro-applications using them.

However, implementing micro-frontends requires careful planning and consideration of various aspects such as communication protocols, data sharing mechanisms, routing, and coordination between micro-applications. It may also introduce additional complexity, as each micro-application needs to be independently developed, tested, and deployed.

Despite the challenges, micro-frontends provide an effective approach for large-scale frontend development, empowering teams to work efficiently, scale their applications, and deliver enhanced user experiences through modular, independent, and reusable components.

583 questions
0
votes
1 answer

How to configer secondar router in micro frontend application in angular?

I am working with micro frontend application I have two application one is shell and other is lead I am using secondary routing in lead application as following { path: '', children: [ { path: '', component: LeadShellComponent, children: [ { path:…
Sayali
  • 109
  • 1
  • 1
  • 6
0
votes
2 answers

Angular Material and Kendo doesn't work with Module Federation Plugin: Bootstrap call not found

I built a microfrontend application using Angular CLI and Module Federation Plugin. When I try to install Angular Material or Kendo, I've got this problem: Bootstrap call not found I followed this link to resolve this problem. Unfortunately, I've…
0
votes
2 answers

Why i am getting can't find module "typescript" when creating an application inside nx workspace in angular?

I have created an nx workspace which is successfully generated. Now i am generating a micro-front-end app inside that nx workspace using this command npx nx g @nrwl/angular:app opShell --mfe --mfeType=host --routing=true So i am getting this…
Fahad Subzwari
  • 2,109
  • 3
  • 24
  • 52
0
votes
1 answer

Micro Frontend Angular 11 Destroy Issue

Overview Micro-Frontend that are developed using Angular-Elements can be either of the two types below. Single Page or widget Micro-Frontend (Microapp-A) Multi Page Micro-Frontend (Microapp-B) Problem Statement In Micro-Frontend with multiple…
0
votes
1 answer

How to create real dynamic input forms in angular?

I have few forms to create/update resources(for example employee resource) which vary slightly based on selected type. Please suggest which of the below option I should consider? 1. Separate components: For each type adds duplication/extra effort…
maddy
  • 3
  • 3
0
votes
0 answers

Is there a limit on how many divs a vue component has to have so it can be displayed as a microfrontend?

I made this webpack module federation microfrontend project that consists a vue project that contains a vue component that should be displayed in another vue project. So I have a vue component like this and it doesn't get displayed: