Description

I'm trying to create an Angular Elements using Primeng components. When I run the Angular app everything works just fine. However, once I build and use my Angular Elements containing my Primeng button component, it breaks.

This is what is in my component:

<button pButton type="button" label="Click"></button>
<p-button label="Click"></p-button>

And here is how a build my Angular Element:

import { Injector, NgModule } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { ButtonModule } from 'primeng/button';
import { AppComponent } from './app.component';
import {
  PrimengButtonElementModule,
  PrimengButtonElementComponent,
} from '../../../primeng-button-element/src/public-api';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    PrimengButtonElementModule,
    ButtonModule,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {
  constructor(private injector: Injector) {
    const myCustomElement = createCustomElement(PrimengButtonElementComponent, {
      injector: this.injector,
    });

    customElements.define('my-custom-element', myCustomElement);
  }
}

I tried to use differents ViewEncapsulation in the component.

I also tried in main.ts

platformBrowserDynamic().bootstrapModule(AppModule, [
  {
    defaultEncapsulation: ViewEncapsulation.native
  }
]

Nothing worked.

Here is repository with a minimal reproduction of the bug: https://github.com/Jad31/primeng-in-angular-elements-issue

Steps to reproduce

1. yarn: to install dependencies
2. yarn run ng serve elements: To demonstrate that primeng button works well in Angular application
3. yarn run elements:build: build the Angular Elements, make it a single js file and place it in the assets of the application (here named using-elements) that will use the Angular Element
4. yarn run ng serve: serve using-elements application

Related Issues

• https://github.com/angular/angular/issues/47106
• https://github.com/primefaces/primeng/issues/11811

CodePudding user response：

Here you can find a solution with angular elements and primeNg => https://gitlab.com/collettemathieu/prime-ng-angular-elements

yarn run build:elements

yarn run start

I think you can improve the system if you want by sharing themes (scss files) from primeNg among apps and maybe that (https://medium.com/netanelbasal/getting-to-know-the-createapplication-api-in-angular-f1c0a2685047) could be of interest to you in order to avoid to create a complete app to use angular elements. But it depends on your needs.

Best regards!