Questions tagged [angular-module-federation]
106 questions
0
votes
0 answers
How to use shared service in angular module fedaration without Nx
Angular Module Federation Shared Services from angular library not sharing same instance(not working as singleton)
Hi,Im new to Angular Module Fedaration. Trying to communicate between the fedarated apps using a service
I have created 2 separate…
0
votes
0 answers
Module Federation with Angular v14 host and v15 remote throws 'inject() must be called from an injection context' error - how to resolve?
Module Federation:
I'm using module federation to load remotes into my host and I have intentionally have version mismatch. The host is using Angular v14 and remotes are using Angular v15. Since there is version mismatch, when I try to load the…
DPatel
- 71
- 6
0
votes
0 answers
Angular Azure Kubernetes Service, Docker, and Nginx - Routing for Microfrontends
I am currently trying to set up a multi-microfrontend deployment hosted in AKS & served with nginx inside of a Docker container.
The Angular application is using / as base href, currently & the compiled JS is linked in the index.html at the…
Matthew Alltop
- 501
- 4
- 20
0
votes
0 answers
Module federation in combination with chunk grouping
I am trying to use ModuleFederationPlugin in an Angular project, I am able to get this working following the documentation available. What I am trying now to is to use chunk grouping configuration, like the example below
module.exports = {
// ...…
iamrakesh
- 219
- 4
- 16
0
votes
0 answers
Webpack module federation plugin - Angular + React: React remote not rendered
I am trying to build a microfrontends system using webpack's ModuleFederationPlugin.
In the current setup, I have three apps:
1 Angular Host
1 Angular Remote
1 React Remote
The Host works fine and renders the Angular remote fine at /ngMFE.
My issue…
Cyberpunker
- 113
- 1
- 2
- 9
0
votes
1 answer
Cannot find microfrontend module providers after update to Angular 14
I'm new to Module Federation and Webpack, but I found myself to work to an Angular project with that technologies. I updated the workspace from Angular 12 to Angular 14 and migrated Module Federation too to 14.3 version.
My microfrontend exposes a…
E.Tiake
- 166
- 1
- 13
0
votes
0 answers
Angular Module Federation: Importing the forRoot() modules when using loadRemoteModule with a standalone component
Angular module federation works for my multi-project angular app when using loadRemoteModule() on a standalone component. This standalone component is being used as a "widget" and therefore does not require routing. However, some module imports use…
christopher
- 615
- 5
- 11
0
votes
1 answer
Angular - Module federation with webcomponents and urls in manifest
I'm trying to load a Micro Frontend as a webcomponent, following this tutorial from angulararchitects.
Configuration in my Shell app :
main.ts
initFederation('/appconf/mf.manifest.json')
.catch(err => console.error(err))
.then(() =>…
isy
- 531
- 1
- 12
- 27
0
votes
1 answer
Tailwind 3 update styles on save not working if Tailwind directives imported in angular component
I have a component in app folder and in that component styles file i added the Tailwind directives
src/app/my-component/my-component.scss
@tailwind base;
@tailwind components;
@tailwind utilities;
when i run ng build all tailwind classes builded…
Alexander Pleshakov
- 67
- 7
0
votes
1 answer
How to consume federated code directly in a component (Angular Module Federation)
I have a federated micro frontend remote component consumed in my main application, that works when it's consumed in the application routes:
path: 'panel',
loadChildren: () => loadRemoteModule({
type: 'module',
remoteEntry:…
msmarkova
- 51
- 7
0
votes
0 answers
How to export @angular/material styles from a user lib(NX) to the nx with MFA workspace apps
I have created an Angular Micro Frontends with Dynamic Module Federation by following the official documentation.
I use the following command to create the workspace:
npx create-nx-workspace demo-app --preset=empty
npm install --save-dev…
Rocky
- 1
- 1
0
votes
1 answer
With Angular module federation, how can I configure my shell and child apps to use different versions of the same library?
I'm using Angular 14 and module federation. In my shell application, I'm using this library
"my-common-lib": "^0.0.10",
I load a child application using this in my routes
{
path: 'products',
loadChildren: () =>
…
Dave
- 15,639
- 133
- 442
- 830
0
votes
1 answer
With Angular module federation v14, how do I prevent a module from loading in both my parent and child apps?
I'm using Angular 14 and module federation. I have this in my child application
module.exports = withModuleFederationPlugin({
name: 'childapp',
exposes: {
'./app1': './src/app/app.module.ts',
},
shared: {
...shareAll({ singleton:…
Dave
- 15,639
- 133
- 442
- 830
0
votes
0 answers
Module federation with older versions of Angular
We have applications with multiples angular versions. The oldest is in angular 7. Can we add this applications, as remotes, on a module federation or only those who have versions of angular compatible with webpack 5?
The host is in Angular 13.
0
votes
0 answers
How to handle errors for modules that could not be loaded
I have an application based on Angular (the shell), Webpacks Module Federation and web components (used to wrap the micro frontend application).
In my router configuration I have the following content:
const routes: Routes = [
....
{
…
Codehan25
- 2,704
- 10
- 47
- 94