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
-1
votes
1 answer

How render Angular 10 project Microfront

I have an existing Angular 10 project I want use it as a microFrontEnd in another shell application .I tried to use angular federation but it seems not possible. Please how can i do it and what are the steps? Thank you
-1
votes
1 answer

Angular cannot find shared component in NX

I am trying to start a small microfrontend project in angular 15 with Nx (integrated) and module federation. At the moment I have two applications: shell video I need to create package of shared components that will eventually be used as I add…
Comforse
  • 2,027
  • 4
  • 25
  • 40
-1
votes
1 answer

Converting Angular Micro-Frontend to Ionic App

I have been looking for information on how to convert an Angular application to an Ionic app. From what I have seen this is possible in monoliths, but would it be possible to convert an Angular application with a micro-frontend architecture to an…
-1
votes
1 answer

how can I relation between 2 app in micro frontend with webpack module federation (angular)

hi there assume that we have a library and an app in angular and we want show a component from library in modal in our app the solution is here we install our library in our app as dependency in (package.json) but my question is If our architecture…
-1
votes
1 answer

Error: ASSERTION ERROR: NgModule '[object Module]' is not a subtype of 'NgModuleType'. [Expected=> null != null <=Actual]

this is the main.ts of the shell projet(port: 5000) that is calling the micro-front-end mfe1 (port:3000) import { loadRemoteEntry } from '@angular-architects/module-federation'; Promise.all([ …
-1
votes
1 answer

Micro front env config in react

Hi I am working on micro front react app. It has 4 micro front ends. - Home, Account, Product Page, Cart & Check Out. There is container app which will have routing of these micro front ends. Where I should keep env files ? Should I keep it in…
Ajay S
  • 48,003
  • 27
  • 91
  • 111
-1
votes
1 answer

How does angular microfrontend can set the cookie in the shell application?

I am exposing a shared widget (ex: calendar widget) as a micro frontend that can be consumed across multiple applications in our organization. The consumed application loads our micro frontend on demand and after it gets loaded, as micro frontend,…
-1
votes
1 answer

remote module not found webpack 5 module federation

Getting below error when loading the remote module, core.js:6498 ERROR Error: Uncaught (in promise): Error: No NgModule metadata found for 'RegisterPageModule'. Error: No NgModule metadata found for 'RegisterPageModule'.
-1
votes
1 answer

How to deploy a microfrontend monorepo on Azure app service

I have setup a monorepo for my microfrontends application. I am new to devops and so I read this article and figured out how to create separate pipelines for each mfe. The final step is where I am a bit confused. When a build completes it generates…
getnot
  • 21
  • 3
-1
votes
2 answers

Is it possible to use React.JS app as a Micro Frontend in a container app built with NextJS?

I have a webpage that uses NextJS. I would like to add, a vanilla React.JS app that is in another repo, to this NextJS website. Using Micro Frontend architecture. Is it possible? Where should I get started? All suggestions are welcome. Thanks
Kristjan Retter
  • 411
  • 5
  • 11
-1
votes
1 answer

Microfront single-spa deployment issue/Clarification

Intro:- We are new to MicroFrontEnd Architecture and we have chosen single-spa framework for this. We are building the front end applications using Angular 10. Issue:- After we built all the micro front end applications and deployed into IIS…
Siva Kumar
  • 87
  • 1
  • 7
-2
votes
1 answer

Sharing component MicroFrontend between an Angular and AngularJS application

I am creating custom web components using Angular (14). It works fine in the Angular application. But when I am planning to use it in AngularJS, I need some help. How can I use custom web components from microfronted into another? Are there any…
-2
votes
1 answer

View injection container for angular

I'm trying to have an angular module for each backend microservice. So to keep each module independent and clean while they use each other's components when available and a default "service-is-not-available" component, when the component is not…
1 2 3
38
39