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

Micro Frontends - We really need communication between sub applications

I decided to refactor our monolith frontend application. I read a lot of articles about micro frontends and mono repo approach. Decided to merge these two architectural approaches and use both. I will have applications folder with all microfrontend…
0
votes
1 answer

Angular Multiple projects routing url gets changed but page not rendering

I have created an multiple angular projects in a single application.I have used routes in the root project and tried to communicate with the child projects but what happens is the url gets changed but the page is not rendering. Root Page…
Nidhin Kumar
  • 3,278
  • 9
  • 40
  • 72
0
votes
1 answer

App running in iFrame rendering to parent DOM via React Portal

So I have a application architecture somewhat like this. There is parent app is a shell that handles loading plugins, service communication, as well a owning an app bar. It can load "content plugins" that are served of a different server (currently…
Robert Lemiesz
  • 1,026
  • 2
  • 17
  • 29
0
votes
0 answers

How can I share imported CSS file from my microservice through a whole html page?

I've created microservice using Angular. I build it in single es2015 module using ngx-build-plus:build. So, I have a qustion. How can I import CSS file (@import '@angular/material/prebuilt-themes/deeppurple-amber.css') in a way to make it possible…
Stas.dp
  • 127
  • 1
  • 10
0
votes
0 answers

Call other apps in different port with webpack || react

Is there any possible way to call other React apps from WebPack? I'm currently working with micro front-ends, and I need a way to call a project from another one, one micro front-end should call another one. I mean: Home micro front-end:…
Joseph Arriaza
  • 12,014
  • 21
  • 44
  • 63
0
votes
0 answers

Micro frontend architecture advice to build a Portal with notification services embedded inside the system

We have several web applications(angular 7+) that we wish to present under one single page application. We are looking for a micro-frontend architecture/framework to use. As we see it, these are our options for implementation: Using the single-spa…
0
votes
3 answers

Angular Elements Error: Zone.js has detected that ZoneAwarePromise

I've been testing out Angular Elements. Basically I created 2 angular elements: a simple button and a simple input. You can check them out here: http://kaloyanmanev.com/edo-button.js and http://kaloyanmanev.com/edo-input.js Both of the elements…
0
votes
2 answers

Angular micro frontends approach

As far as I can tell there are two popular cases when using micro front ends - 1) Single page with components ( each on its own service ) 2) Multiple pages accessible from a dashboard / navbar ( each part on its own service ) I have been digging…
Ivgi
  • 541
  • 1
  • 6
  • 21
0
votes
1 answer

How can I import compiled svelte-components/-apps into a svelte-app at runtime

Is it possible to dynamically import precompiled svelte components or whole svelte apps. And when, how do I compile a single component in svelte 3. I found this approach, but nothing in the docs: https://github.com/sveltejs/svelte/issues/1576 I…
user9223099
0
votes
1 answer

Use Angular Element in app.component.html

I have been playing with Angular Elements for a while. Our team is building multiple independent angular projects and convert them into Angular Elements. We also build a main shell and those angular elements will be called in the main shell. The…
Julie C.
  • 629
  • 2
  • 11
  • 20
0
votes
1 answer

How to decompose UI in micro front ends?

This is the continuation of Adding Data from UI to different microservices. That question was about splitting BE into microservices. Now, I'm looking for a way to decompose the UI into microfrontends as well. Imagine you have a user registration…
0
votes
2 answers

ERROR: Expected to not be in Angular Zone, but it is

I was trying to build a demo by using Angular and single-spa to see whether this could be our future path of development. Here is the example I tried to borrow from. https://github.com/PlaceMe-SAS/single-spa-angular-cli-examples However, I found…
Julie C.
  • 629
  • 2
  • 11
  • 20
-1
votes
1 answer

Schema validation failed with the following errors: Data path "" must have required property 'outputPath'

I get this error while trying a simple poc for microfrontend with angular. Here is the link to code sample. I get the error with this command: npm run start:app1 Schema validation failed with the following errors: Data path "" must have required…
Amir Choubani
  • 829
  • 2
  • 14
  • 28
-1
votes
0 answers

Single-spa subapp renderd but not displaying

I have a main app using Nuxt2 and Vue. And I try to add a microfrontend using single-spa library. The subapp rendered in the main app without any errors but it is not displaying. I also use vue-i18n. Asynchronous functions in plugins section which…
Tea
  • 16
  • 4
-1
votes
0 answers

Unable to render ag-grid in remote MFE angular application when hosted live. In localhost working

NullInjectorError: R3InjectorError(l)[l -> l -> a -> a -> a]: NullInjectorError: No provider for a! unable to render ag-grid in remote MFE angular application when hosted live. In local environment its working fine Tried to debug the application
iShadev
  • 9
  • 2
1 2 3
38
39