Angular Elements集成Primeng组件失效问题求助

我尝试基于PrimeNG组件创建Angular Elements，在Angular应用内运行一切正常，但构建成独立的Angular Elements并使用时，包含PrimeNG按钮组件的元素出现异常。

组件代码 #

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

Angular Elements构建代码 #

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);
  }
}

已尝试的解决方案 #

我试过在组件中切换不同的ViewEncapsulation，也在main.ts中设置如下配置，但都没能解决问题：

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

复现步骤 #

• yarn：安装依赖
• yarn run ng serve elements：验证PrimeNG按钮在Angular应用中正常运行
• yarn run elements:build：构建Angular Elements为单个js文件，放入使用该元素的应用（using-elements）资源目录
• yarn run ng serve：启动using-elements应用

相关问题 #

• Angular官方仓库Issue #47106
• PrimeNG仓库Issue #11811

内容的提问来源于stack exchange，提问作者Jad