Angular Elements does not work with Primeng

[Jad31]

Describe the bug

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 the result of ng version:

Angular CLI: 13.3.9
Node: 16.16.0
Package Manager: yarn 1.22.17
OS: darwin x64

Angular: 13.3.11
... animations, common, compiler, compiler-cli, core, elements
... forms, platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1303.9
@angular-devkit/build-angular   13.3.9
@angular-devkit/core            13.3.9
@angular-devkit/schematics      13.3.9
@angular/cli                    13.3.9
@schematics/angular             13.3.9
ng-packagr                      13.3.1
rxjs                            7.5.6
typescript                      4.6.4

Environment

PrimeNG 13.3.0 Angular 13.3.0 OS X, Windows and Linux

Reproducer

https://github.com/Jad31/primeng-in-angular-elements-issue

Angular version

13.3.0

PrimeNG version

13.3.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

16.16.0

Browser(s)

Version 104.0.5112.79 (Official Build) (x86_64)

Steps to reproduce the behavior

Clone the minimal reproduction of the bug repository: https://github.com/Jad31/primeng-in-angular-elements-issue

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

Expected behavior

Primeng components working with Angular Elements.

Related Issues

• https://stackoverflow.com/questions/73303622/angular-elements-does-not-work-with-primeng
• https://github.com/angular/angular/issues/47106

[collettemathieu]

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!

[Jad31]

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!

Thanks to your solution, it is working well now ! I could use what's described in your article but i'm working on an angular 13 project so i can't use the function createApplication since it's available in angular 14.2.