Jhipster 8.8.0 Microfront end, with primeng 19 style issue

[NNanosoft]

Overview of the issue

I create a gateway and blog microservice with microfront end, I added the primeng package with primeng themes on both gateway and microservice, setup the theme on the gateway app.config.ts. Then I added a primeng button on home screen and Blogs list screen. When I run the gateway and the microservice application with mvnw command, the button on the home screen is loaded correctely with style and variables, when I navigate to the blog list screen using the navigation bar the button on the blog list is loaded correctelly with style and variables too,

but when I refresh the blog list screen (with F5 button or clicking refesh button on the browser) the primeng button doesn't load properly and on the page header the button-style is loaded but not button-variable

Motivation for or Use Case

I think that this is a bug on webpack config generated by JHipster because I did the same on project with angular and it works fine there.

Reproduce the error

to repoduce this issue, I create a github repository with demo application: https://github.com/NNanosoft/primeng-mf-jhipster

Related issues

Suggest a Fix

JHipster Version(s)

I did the test with JHipster 8.8.0

Browsers and Operating System

Windows 11
The command line is launched with PowerShell.

[NNanosoft]

Hi @mshima , do you have any idea on how this could be fixed, our maybe a hint where I can invertigate further ?

[pramodcr28]

Hai How to create micro frontend by jhipster including primeng ?

[NNanosoft]

Hi @pramodcr28 there is no native configuration in JHipster to generate a project with primeng, there is some blueprints to do that but I think there are not maintained.
The solution is to genrate a project and then add primeng manualy, but, and this is the problem I am facing, the integration is not working for a raison that I dont understand (this is the purpuse of this issue ticket).

[NNanosoft]

Hello,

I want to share with you my finding, maybe it could help to find a solution.

After debugging deeper the primeng source code as well, I find out that the variables are not initialized because of an undefined Theme variable.

I follow bellow steps:

• Add primeng theme provider on microservice as well
  providePrimeNG({ theme: { preset: Aura } })
  ==> Result the issue still here

• Add a theme assignment directelly on the remotely accessed component (on ngOnInit method) : this.primeng.theme.set({ preset: Aura })
  ==> this solve the problem, but it could not considered as solution since we should add this assignment to all component

Conclusion:
As a conclusion the theme provider of the host application is not in the scope of the remote components.
How can we make the provider it accessible from the host application ? Or How can we pass the providers as well to the host application with components

[mshima]

@NNanosoft can you split the change related to primeng into a separate commit?
My guess is that you haven't added primeng to shared packages.

[NNanosoft]

@mshima here is the workaround solution : Commit

I didn't add primeng package on shared packages, as understood from the webpack.microfrontend.js it should be added automatically. Otherwise, could you explain how to add it, so I can try it.

[NNanosoft]

@mshima I've just checked, both primeng packages are part of shared dependencies, I print out the shared dependency list I got them in the list:

'@primeng/themes': {
    singleton: true,
    strictVersion: true,
    requiredVersion: '19.0.6',
    version: '19.0.6'
  }
....
primeng: {
    singleton: true,
    strictVersion: true,
    requiredVersion: '19.0.6',
    version: '19.0.6'
  },

[mshima]

You may need to share named imports too like @primeng/themes/aura:

generator-jhipster/generators/angular/templates/webpack/webpack.microfrontend.js.ejs

Lines 37 to 38 in 42ea077

	'@angular/common/http': sharedDependencies['@angular/common'],
	'rxjs/operators': sharedDependencies.rxjs,

[NNanosoft]

Hi @mshima , you are right, the issue now is solved when I installed the package @primeuix/styled on both side (add it to package.json dependencies) which is a sud dependency of primeng/theme, I add it so that it will be visible for the webpack.microfrontend.js when loading the application dependencies.

I dont know what is the deference between the generated project from jhipster and a normal angular project, why on the first it doesn't load it, but it did on the second

Thank you @mshima for your hint it was helpfull