Questions tagged [micro-frontend]

The tag has no usage guidance.

Filter by
Sorted by
Tagged with
-4 votes
0 answers
26 views

How to create micro front end architecture using container as react, other project in angular [closed]

I have been looking for the proper git repo for micro frontend. Here is my requirement- react app as container app and other app should be in angular. I found couple of repos, Which does reverse. ...
0 votes
0 answers
13 views

How to implement Microfrontend with CRA3?

Is there a way to implement microfrontend with CRA3 or webpack4? My remote microfrontend is built using webpack 5 module federation. I want to consume the remote application in container app which is ...
  • 1
0 votes
0 answers
9 views

When I try to import a shared module inside a single-spa, I get a "application 'application_name' died in status LOADING_SOURCE_CODE" error

Whenever I try to import a shared module inside a single-spa, I get the following error Uncaught Error: application 'application_name' died in status LOADING_SOURCE_CODE: Unable to resolve bare ...
0 votes
2 answers
25 views

How to pass data from a parent Flutter web application to an iFrame child flutter web application in Dart

I have two different flutter web application hosted on different server running on different domain. Both application has sign in features. Now our requirement changed and we have to serve one ...
0 votes
0 answers
5 views

Micro front-end integration approach for native apps

At the company where I work, we already use micro front-ends (aka microsites) for a few scenarios, but we're now looking to expand this to other scenarios. We have have certain 'capabilities' that we ...
  • 3,427
1 vote
0 answers
20 views

Vue Microfrontend Lazy Loading Component

Hi I'm creating a new microfrontend app, with different micrfrontends. The hosting one have to load all the other mfes, but i need to load them after the login with the access token generated. I'm ...
  • 75
0 votes
1 answer
38 views

React Routes not working with Module Federation

So I'm using React v18, Router v6 and Module federation this is root app routes this is Payments app routes in .packages/payments/scr/app the problem is that Payments page is rendered and working fine,...
0 votes
0 answers
27 views

How do you statically serve a module federation micro-frontend from an express server?

I would like to host my module federation react app inside of an express server. I have a container app and a remote app. The only approach I could come up with is to statically serve each micro-...
  • 1
0 votes
0 answers
11 views

Qiankun for multiple environments

I'm trying to build a micro-frontend app with Qiankun. I'm using create-react-app as main-app and vite-react as sub-app. It was working fine locally. The main-app is running on port 8080 and child-app ...
  • 552
1 vote
1 answer
44 views

How to load a custom element in another Angular application(single page app)?

My index.html file of my shell app has a custom element called overview-cards-element which I have given in a script tag. http://localhost:8082/mfe1.js (It is the compiled js file). I'm unable to ...
  • 11
0 votes
0 answers
17 views

Multiple custom Angular elements zone issue from host application

I am using two angular elements in two different tabs in angular host application and both of them uses firebase, In host application I face an issue about rendering in DOM, which is after retrieving ...
1 vote
1 answer
156 views

Next JS module ferderation

I am trying to create micro-frontend with NextJS, for that I am using @module-federation/nextjs-mf npm package. I have created 2 seperate nextJS projects with Next CLI inside a parent folder. The 2 ...
0 votes
0 answers
45 views

How to load i18 translation files from remote MicroFrontend on create react app?

I have two microfrontends A and B created using CRA. Both has two individual i18 translation files within them. The problem is, the moment the host app(A) loads translation files on app A renders ...
0 votes
0 answers
25 views

Sharing routing data with embeded applications in ReactRouter 6

I have three applications, Container, App1, and App2, all of them React applications. Container is a container application and App1 and App2 are applications embedded within Container. The Container ...
  • 141
0 votes
0 answers
26 views

Angular Modular Federation bundle is not compressed (g-zipped) and loading time is more

I could see the gzip/compression not happening in my angular modular federation application. I am using Manfred Steyer Module Federation. This is causing more time to load my application. I have ...
0 votes
1 answer
114 views

Module federation with React & Angular

I'm trying to setup a micro frontends project, when React will be the host with Angular remote app. this is the webpack configs for both React & Angular: Angular (the remote) webpack.config.js: ...
  • 1,278
0 votes
0 answers
53 views

Shared local libs in Angular Micro Frontends are not singleton but create new instances

We have some Angular 14.x applications implemented as micro-frontends (mfs) using the lib @angular-architects/module-federation": "^14.3.0". We have some local libs that should be ...
  • 9,572
0 votes
1 answer
179 views

MFE module federation cannot find module for remote child import

Im trying to build out a micro frontend for the first time so my main application can support a sub application. I have it all working when everything is just rendering App.tsx (remote) but as soon as ...
  • 2,271
0 votes
0 answers
13 views

How to transpileModules for react microfrontend application

TranspileModules for react microfrontend application I have one main app and one common so in that have to transpile that common package ? Here is my webpack.cofig: I am using Webpack version 5.70 ...
0 votes
0 answers
189 views

Configure Tailwind css with micro-frontend architecture using nrwl/nx angular apps

How to configure tailwind css with micro-frontend using @nrwl/nx library. Few steps that I know are npx nx generate @nrwl/angular:setup-tailwind <App name> @tailwind base; @tailwind components; ...
  • 14.5k
1 vote
0 answers
29 views

How to restrict code access in module federation?

I want to use micro frontend for one of my client project at work. The requirement of project is such that we will be using horizontal split and at some places might use vertical split. Since client ...
0 votes
0 answers
68 views

Error when use remote components with hooks and module federations with nextjs

I receive this error when use hooks in component from remote app when enter image description here i use now nextjs13 with module federations how to resolve this enter code here my component remote ...
0 votes
0 answers
15 views

Modify an existing application to make it as a remote for a shell application using mfe with module federaation in angular

I have an existing application, I want to make it a remote for a shell created with module federation. what chnages do I have to make in this app and the shell to accomodate this and will this work if ...
1 vote
0 answers
165 views

How to implement Module Federation in Next.js &

everybody I'm working with nextjs and now I'm starting to use microfrontends I'm trying to implement a repository container for this I use @module-federation/nextjs-mf I want to put localization and ...
  • 71
0 votes
1 answer
79 views

Do i need to share my peer dependency packages of a shared library in angular modular federation

I have a shared library in my monorepo with multiple angular application. Do i need to share the peer dependency packages using the share function of @angular-architects/module-federation/webpack. I ...
0 votes
0 answers
164 views

How to serve assets from remote to shell application in angular module federation

I have implemented the angular module federation (micro frond ends) for my angular applications but facing the rendering issue (broken) with svg icons those are available in remote application. But ...
  • 5
0 votes
0 answers
29 views

Authenticating users on a page rendered on a website as micro-frontend?

Context I have a website example.com where I am authenticating users using SSO via SAML with AWS Cognito. There is another web page hosted on test.example.com/xyz which I am rendering on example.com/...
  • 25
0 votes
0 answers
43 views

Micro-front end web app using webpack, react and angular(latest version)

I want to create a web application using JavaScript frameworks. The basic idea is to create a simple navbar through which we can switch to Angular and react module. I want to use webpack as a base ...
  • 114
0 votes
0 answers
30 views

Angular modular federation build issue. All my shared packages are building separately

I am trying to implement modular federation in Angular using "@angular-architects/module-federation": "14.3.14".(as monorepo with multiple angular applications). I want to share ...
0 votes
1 answer
113 views

Share data between 2 Angular micro frontend apps that reside in different repository

I have 2 angular micro frontend apps residing in different repository Angular shell app -- Repository 1 Angular Micro frontend app1 -- Repository 2 Angular Micro frontend app2 -- Repository 3 Is there ...
  • 5,088
0 votes
0 answers
40 views

Angular module federation error consuming a microfrontend

Error consuming a MFE. Error: Error Current Behavior: An angular shell fails consuming a react MFE. Apps details: Angular shell React MFE (backstage app) Steps to reproduce: Run react MFE, ...
0 votes
1 answer
52 views

Getting getNgModuleDef error in Angular micro frontend applications with multiple repo

I have created Micro frontend angular applications in different repository. Shell App - Repository 1 Mf1 App - Repository 2 Shell Webpack.config output: { uniqueName: "shell", ...
  • 5,088
0 votes
0 answers
17 views

How can a third party use internally developed microfront end services?

So my company have developed what they are calling a 'microfront end' for a user to navigate an internal website and perform various functions. The internal website speaks to a different platform to ...
  • 1
0 votes
0 answers
31 views

Nested Microfrontend Angular

I would like to know if it was possible in Angular to use microfrontends in a nested way. Let me explain, I have an application that uses within one component multiple times components from another ...
  • 1
2 votes
0 answers
69 views

Module federation display a blank page for a few seconds even using Suspense

I have a 2 React micro-frontend applications, one host and one remote, I'm able to load the remote app into the host using Lazy loading and Module Federation, like this: const RemoteApp = lazy(() =>...
  • 1,375
0 votes
0 answers
46 views

Translation files are not read from mirco frontend angular application

I am trying to read ar.json & en.json from the micro frontend application but it only read it from the other angular application where I call the micro frontend app. I see this resource "...
0 votes
0 answers
38 views

CORS issue in webpack shell application

I have two application running in a server. One is shell application and another application is auth application. From shell application, I called auth application's main.js as like below in index.ejs ...
  • 13
0 votes
1 answer
55 views

Can't resolve module JHipster Micro-frontend

Hi I am running the command to generate microfrontend applications/microservices. I am running into the following errors when deploying my gateway application: [INFO] ./src/main/webapp/app/app-...
0 votes
1 answer
57 views

How do I reference a Blazor WASM project to another Blazor WASM?

I want Create micro-frontends with Blazor WASM (base on this article), I Create two blazor wasm project one name is MicroFrontendsExample.Shell is container/appshell and other name is:...
  • 621
1 vote
0 answers
30 views

Unrender component created by ReactDOM.render when the container is unrendered

There're two component developed in two different application. One is App. Another one is MFE1. In real world we have MFE2, MFE3, MFE4...etc. And App is just a container. We will load different MFE ...
0 votes
0 answers
71 views

Angular module federation site not able to deploy in production properly (404 error when calling remotes)

I attempted millions of things already, so help me please. By following this documentation: https://nx.dev/recipes/module-federation/faster-builds#production-build-and-deployment-with-nx-cloud I want ...
  • 2,556
0 votes
0 answers
51 views

Multiple DSNs and unhandled JavaScript exceptions in Sentry

Sentry allows to create multiple Hubs with different DSNs on the same page. This is great, since I can separately monitor each module/component in a micro-frontends setup. My question is (and I can't ...
0 votes
1 answer
111 views

reactjs-axios do not send cookies in its get request

Axios does not send cookies in get method call to back end server, i have also set the withCredential true method, but it's not working. here is the peace of my code, axios .get("http://...
0 votes
1 answer
53 views

i have tried to create microfrontend using this commnad npx create-nx-workspace ng-mfe but getting error

npm ERR! code ENOTFOUND npm ERR! errno ENOTFOUND npm ERR! network request to http://registry.npmjs.org/create-nx-workspace failed, reason: getaddrinfo ENOTFOUND iaccess.ril.com npm ERR! network This ...
1 vote
0 answers
92 views

How to load components (containing assets) from npm package in a Single-Spa application?

I have an application build using Single-Spa and it consist of: Root Config App (hosted on http://localhost:3000) App1 (Angular application hosted on http://localhost:3001) App1 has a dependency (...
  • 23
1 vote
0 answers
29 views

how do i configure entry point of react project in MicroFrontend.jsx?

I have a 3 react project which are combined MicrofrontEnd application. I am trying to switch from Webpack(react-app-rewired) to vite. fetch(`${host}/manifest.json`) .then((res) => res.json()) ...
0 votes
1 answer
55 views

How to get transloco to read from different files

I am using in an Angular project transloco for multilanguage. In this project, I am also importing a micro frontend with modules federation. The microfront module have its own translation dictionary ...
  • 65
1 vote
0 answers
122 views

How can I import types/interfaces from a SingleSpa utility module to a Typescript based Micro frontend react app

I'm setting up Micro Frontend architecture using SingleSpa. My apps(micro frontends) are setup using Typescript. As I'm in need of extracting out some common/shareable types/interfaces. So, each app ...
0 votes
0 answers
51 views

Angular elements microfrontend resource path

I have several Angular applications, each of which is included in a shell as a microfrontend. This is described in the Angular Architects Blog. The integration of the individual microfrontends into ...
0 votes
1 answer
62 views

Running SingleSpa Micro-frontend in Dev standalone mode with no Internet access

Need a piece of advice regarding a good way to override dependencies of Single-Spa running Micro frontend in standalone mode. The point is that I need to run my Micro frontend in dev standalone mode ...
  • 31

1
2 3 4 5
10