PrimeNG themes not rendering

For which library do you need help?

native-federation

Question

This may or may not be an issue with module-federation but I cannot get PrimeNG themeing to function in a federated app. It works perfectly in a 'standard' app. Following the installation instructions and using the sample federated app in github, I tried applying the theme provider to the bootstrap of MFE1:

...
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { providePrimeNG } from 'primeng/config';

import Aura from '@primeng/themes/aura';
...
bootstrapApplication(AppComponent, {
  providers: [
    provideAnimationsAsync(),
    providePrimeNG({
      theme: Aura,
    }),
  ],
});

I also tried the format:

theme: { preset: Aura },

With the PrimeNG libraries also included, this should then provide the ability to render Prime components, eg:

<p-button label="search"></p-button>

I stripped out the sample CSS from the app and ran the MFE1 child, this is what is shown:

Both buttons are rendered as buttons and we see that the Prime button has been correctly constructed but naked of any applied themeing:

Could it be that the @angular-architects/native-federation:build builder is doing something different than the vanilla Angular builder @angular-devkit/build-angular:browser?

I also tried adding to the component's init lifecycle, but without any difference:

  import { PrimeNG } from 'primeng/config';

  import Aura from '@primeng/themes/aura';
...
  primeng = inject(PrimeNG);

  ngOnInit(): void {
    this.primeng.theme.set(Aura);
    console.log('userName', this.auth.userName);
  }

Has anyone used PrimeNG themes with federated modules and can give me any pointers?

angular-architects / module-federation-plugin

PrimeNG themes not rendering #695

For which library do you need help?

Question