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
yarn
: to install dependenciesyarn run ng serve elements
: To demonstrate that primeng button works well in Angular applicationyarn 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 Elementyarn run ng serve
: serve using-elements applicationHere 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!