Questions tagged [micro-frontend]
The micro-frontend tag has no usage guidance.
498
questions
-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 ...
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 ...
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 ...
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-...
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 ...
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 ...
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 ...
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:
...
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 ...
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 ...
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;
...
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 ...
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 ...
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/...
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 ...
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 ...
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",
...
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 ...
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 ...
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(() =>...
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 ...
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:...
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 ...
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 (...
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 ...
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 ...