Error in runtime with angular remote native federation

[jlgapp]

Hi, I am struggling with primeng and theme 19.0.5, I've installed it in my remote native federation and I have this error: "Unable to resolve specifier '@primeng/themes/aura/accordion' imported from http://localhost:4204/_primeng_themes_aura", Could anyone help me please, what I have to do.
My angular version is 19.1.0

[nandomegale]

same error here

[meloryayala]

I also have the same problem

[meloryayala]

I declared each component in the shared of federation.config.js and I could finally run the application:

 shared: {
    ...shareAll({
      singleton: true,
      strictVersion: true,
      requiredVersion: 'auto',
      transient: true
    }),
    '@primeng/themes/types': {
      packageInfo: {
        entryPoint: 'node_modules/@primeng/themes/index.mjs',
        version: '19.0.5',
        esm: true
      }
    },
    '@primeng/themes/aura/accordion': {
      packageInfo: {
        entryPoint: 'node_modules/@primeng/themes/aura/accordion/index.mjs',
        version: '19.0.5',
        esm: true
      }
    },
    '@primeng/themes/aura/autocomplete': {
      packageInfo: {
        entryPoint: 'node_modules/@primeng/themes/aura/autocomplete/index.mjs',
        version: '19.0.5',
        esm: true
      }
    },
    and so on ...
    }

[nandomegale]

@meloryayala in the MFE or Shell? The primeng components appears in Shell when called MFE?

[meloryayala]

I needed to add this on each repository which has native-federation v19 and primeng v19.

Currently I tried to migrate the Host and one of my Remote apps and in order for both to work, I needed to add this config on both Host and Remote

[nandomegale]

Nice! I'll try too. Thanks very much for share. And congrats 😄

[jlgapp]

That's awesome. I'll try it, too; thanks a lot.

[nandomegale]

@meloryayala I tryed something different and works, look:

1 - I create a new host and new remote angular projects with angular v19.
2 - Install primeNG in both.
3 - Config primeNG in both.
4 - Install @angular-architects/native-federation 19 in both.
5 - Install chart.js in both (for some reason when you install native-federation with primeNG an error occurs with chart.js)
6 - Add in both the below configuration in federation.config.js.
7 - run apps.
8 - call mfe1 in shell.

HOST federation.config.js

  withNativeFederation,
  shareAll,
} = require("@angular-architects/native-federation/config");

module.exports = withNativeFederation({
  shared: {
    ...shareAll({
      singleton: true,
      strictVersion: true,
      requiredVersion: "auto",
      transient: true,
    }),
    "@primeng/themes/types": {
      transient: true,
      packageInfo: {
        entryPoint: "node_modules/@primeng/themes/index.mjs",
        version: "19.0.5",
        esm: true,
      },
    },
    "@primeng/themes/aura": {
      singleton: true,
      strictVersion: true,
      requiredVersion: "auto",
      transient: true,
      includeSecondaries: false,
      build: "separate",
    },
  },

  skip: [
    "rxjs/ajax",
    "rxjs/fetch",
    "rxjs/testing",
    "rxjs/webSocket",
  ],

});`

REMOTE fededation.config.js

const {
  withNativeFederation,
  shareAll,
} = require("@angular-architects/native-federation/config");

module.exports = withNativeFederation({
  name: "mfe1",

  exposes: {
    "./Component": "./src/app/app.component.ts",
  },

  shared: {
    ...shareAll({
      singleton: true,
      strictVersion: true,
      requiredVersion: "auto",
      transient: true,
    }),
    "@primeng/themes/types": {
      transient: true,
      packageInfo: {
        entryPoint: "node_modules/@primeng/themes/index.mjs",
        version: "19.0.5",
        esm: true,
      },
    },
    "@primeng/themes/aura": {
      singleton: true,
      strictVersion: true,
      requiredVersion: "auto",
      transient: true,
      includeSecondaries: false,
      build: "separate",
    },
  },

  skip: [
    "rxjs/ajax",
    "rxjs/fetch",
    "rxjs/testing",
    "rxjs/webSocket",
  ],
});

Although when u open the apps, this erros on vite appears:

But application still work

[ratsey]

The vite errors are something Manfred is addressing. angular-architects/module-federation-plugin#740

[meloryayala]

Amazing @nandomegale thank you for sharing

[CarlosOlea99]

I was wondering — have you (or anyone else here) tried exposing and loading routes instead of components with this same setup?

I’m using Angular 19 and standalone components too, and I’m trying to make it work using loadRemoteModule({ exposedModule: './Routes' }) instead of ./Component.

[ratsey]

@CarlosOlea99 Yes, I do it all the time to allow my end points to run headless with their own routes. In the shell app.routes.ts just expose the routes from the child and it will delegate:

{
  path: 'reporting',
  component: LayoutComponent,
  loadChildren: () =>
    loadRemoteModule('reporting', './routes')
      .then((m) => m.routes)
...
}

Works well.

[CarlosOlea99]

I tried to add Tailwind to PrimeNG 19 using the following command:

pnpm install tailwindcss @tailwindcss/postcss postcss

In the root of the project, I created the .postcssrc.json file with the following content:

⚙️ Configuration

{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}

However, I get the following error:

❌ Error Encountered

✘ [ERROR] No loader is configured for ".node" files: node_modules/.pnpm/@tailwindcss+oxide-win32-x64-msvc@4.1.10/node_modules/@tailwindcss/oxide-win32-x64-msvc/tailwindcss-oxide.win32-x64-msvc.node

node_modules/.pnpm/@tailwindcss+oxide@4.1.10/node_modules/@tailwindcss/oxide/index.js:106:23:
  106 │         return require('@tailwindcss/oxide-win32-x64-msvc');
      ╵

🤔 Question
Do I need to add any additional configuration to federation.config.js?

[yasmany-santalla]

Thank you, everyone! 🎉 My monorepo project uses Nx, Angular (~19.1.0), and PrimeNG (^19.0.6). I configured Module Federation only in the shell app, and it works perfectly for me. 🚀

const {
withNativeFederation,
shareAll,
// share,
} = require('@angular-architects/native-federation/config');

module.exports = withNativeFederation({
name: 'shell',

shared: {
...shareAll({
singleton: true,
strictVersion: true,
requiredVersion: 'auto',
transient: true,
}),
'@primeng/themes/types': {
transient: true,
packageInfo: {
entryPoint: 'node_modules/@primeng/themes/index.mjs',
version: '19.0.6',
esm: true,
},
},
'@primeng/themes/aura': {
singleton: true,
strictVersion: true,
requiredVersion: 'auto',
transient: true,
includeSecondaries: false,
build: 'separate',
},
'@primeuix/styled': {
singleton: true,
strictVersion: true,
requiredVersion: 'auto',
transient: true,
},
},

extraOptions: {
addHostAttributes: true, // Ensures unique component IDs in microfrontends
},

skip: [
'rxjs/ajax',
'rxjs/fetch',
'rxjs/testing',
'rxjs/webSocket',
// Add further packages you don't need at runtime
],
});

[vinnikam]

I implemented this solution and was able to display the input component properly, thanks

[alearchaeologist]

ok, but surely we can find an issue with this shared config of the Primeng themes:

what will happens if host use, for example, theme/material, and the remote use theme/aura?
we have to consider this: normally the first who shares his style is the host, and will be allright if host use aura as the remote because we don't see a difference between the views, but if the host use material the remotes will use material too and the remote view will looks completely different.

i think that host and remote have to separate completely their styles, so the shared solution is limited.

[mmfleischer]

Thanks to the previous answers i got primeng running in a very basic sample project.
But i had another issue when components use overlays or animation. The overlays are missing styles which causes misplacement and also no animations are applied. Did anyone else encounter this issue and found a solution?

Normal:

After federation setup:

[Ivelin153]

Did you managed to find a fix for that one?
I am trying to understand why native-federation breaks the styling, but cannot figure it out...

[FaxriddinFaxa]

Certainly! Here's a clear English description of the issues you were facing with Module Federation and PrimeNG:

🧩 Problem Summary: Integrating PrimeNG with Angular Module Federation

You were building a micro frontend architecture using Angular 19, Standalone Components, and Module Federation. Your goal was to:

Define the PrimeNG theme and configuration centrally in the Host project.

Share that theme/config globally across all Remote (Micro Frontend) projects.

Use providePrimeNG() in the Host and expect it to propagate into Remotes.

⚠️ Key Issues Encountered

PRIME_NG_CONFIG is null in Remote apps
When trying to inject PRIME_NG_CONFIG using Angular's inject() function or in constructor injection inside a Remote project, it threw the following error:

NullInjectorError: No provider for InjectionToken PRIME_NG_CONFIG!

PrimeNG theme not applied to Remote components
Even though the Host provided the PrimeNG theme using providePrimeNG() with a preset like Aura, Remote components did not reflect the theme styles. Components appeared unstyled.

inject(PRIME_NG_CONFIG) throws NG0203
You encountered:

NG0203: inject() must be called from an injection context...

when trying to call inject() outside of a valid Angular injection context, especially in the main.ts or root-page.component.ts.

Confusion with shared configuration
You declared primeng, primeng/api, primeng/config, and @primeng/themes in the shared section of webpack.config.js, both in the Host and Remote projects — expecting the PrimeNG configuration provided in the Host to automatically propagate to all remotes.

Inconsistent injection behavior
Despite setting singleton sharing for primeng/config, the PrimeNG configuration provider did not carry over into remote apps. Remote apps were trying to inject config that was never provided in their context.

🛠 Root Cause

Angular's Dependency Injection (DI) does not automatically pass providers like providePrimeNG() across Micro Frontend boundaries via Module Federation. Even with shared libraries and singleton flags, DI providers must be explicitly registered in each Remote's own application setup.

[JGhignatti]

Here's a thread in the Native Federation Github page related to PrimeNG, maybe it helps someone angular-architects/module-federation-plugin#916

[babu0104]

Hi,
Now application load is resolved by adding above config but
Prime icons and prime flex variables are not picking, we are using angular 19 and
"primeflex": "^4.0.0",
"primeicons": "^7.0.0",
"primeng": "^19.1.4",
"@primeng/themes": "^19.1.4"

shell app federation config:

const { withNativeFederation, shareAll } = require('@angular-architects/native-federation/config');

module.exports = withNativeFederation({

shared: {
...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
'@primeuix/styled': {
singleton: true,
eager: true,
strictVersion: true,
requiredVersion: 'auto'
},
"@primeng/themes/types": {
transient: true,
packageInfo: {
entryPoint: "node_modules/@primeng/themes/index.mjs",
version: "19.1.4",
esm: true,
},
},
"@primeng/themes/aura": {
singleton: true,
strictVersion: true,
requiredVersion: "auto",
transient: true,
includeSecondaries: false,
build: "separate",
}
},

skip: [
'rxjs/ajax',
'rxjs/fetch',
'rxjs/testing',
'rxjs/webSocket',
'font-awesome',
'primeicons',
'primeflex'
// Add further packages you don't need at runtime
]

// Please read our FAQ about sharing libs:
// https://shorturl.at/jmzH0

});

and also imports in styles.scss
/* Plain CSS must use @import */
@import "primeicons/primeicons.css";
@import "primeflex/primeflex.css";

Issue:

.p-datepicker-input-icon-container {
cursor: pointer;
position: absolute;
top: 50%;
inset-inline-end: var(--p-form-field-padding-x);
margin-top: calc(-1 * (var(--p-icon-size) / 2));
color: var(--p-datepicker-input-icon-color);
line-height: 1;
}
--p-form-field-padding-x is not defined