Angular 带有自定义元素错误的 Web 组件

Question

我正在尝试使用 Angular 个元素在 Angular 中创建一个基本 Web 组件。

到目前为止，我做了以下事情：

使用 npm i @angular/elements --save
已安装npm i @webcomponents/custom-elements -- save
已将 CUSTOM_ELEMENTS_SCHEMA 添加到 app.module.ts

schemas

创建组件，调用它MyComponent
使用以下代码在 AppModule 中将 MyComponent 定义为自定义元素

    export class AppModule {
        constructor(injector: Injector) {
            const el = createCustomElement(WeatherForecastComponent, { injector });
            customElements.define('weather-forecast', el);
        }
    }

完成所有这些后，运行 npm start 给出了以下错误：

ERROR in ./node_modules/@angular/elements/fesm2015/elements.mjs 328:49-63 Can't import the named export 'ApplicationRef' from non EcmaScript module (only default export is available)

ERROR in ./node_modules/@angular/elements/fesm2015/elements.mjs 323:68-85 Can't import the named export 'ChangeDetectorRef' from non EcmaScript module (only default export is available)

ERROR in ./node_modules/@angular/elements/fesm2015/elements.mjs 123:50-74 Can't import the named export 'ComponentFactoryResolver' from non EcmaScript module (only default export is available)

ERROR in ./node_modules/@angular/elements/fesm2015/elements.mjs 187:25-49 Can't import the named export 'ComponentFactoryResolver' from non EcmaScript module (only default export is available)

ERROR in ./node_modules/@angular/elements/fesm2015/elements.mjs 320:30-38 Can't import the named export 'Injector' from non EcmaScript module (only default export is available)

ERROR in ./node_modules/@angular/elements/fesm2015/elements.mjs 233:40-46 Can't import the named export 'NgZone' from non EcmaScript module (only default export is available)

ERROR in ./node_modules/@angular/elements/fesm2015/elements.mjs 204:33-46 Can't import the named export 'ReplaySubject' from non EcmaScript module (only default export is available)

ERROR in ./node_modules/@angular/elements/fesm2015/elements.mjs 404:42-54 Can't import the named export 'SimpleChange' from non EcmaScript module (only default export is available)

Can't import the named export 'Version' from non EcmaScript module (only default export is available)

ERROR in ./node_modules/@angular/elements/fesm2015/elements.mjs 346:32-35 Can't import the named export 'map' from non EcmaScript module (only default export is available)

ERROR in ./node_modules/@angular/elements/fesm2015/elements.mjs 206:68-73 Can't import the named export 'merge' from non EcmaScript module (only default export is available)

ERROR in ./node_modules/@angular/elements/fesm2015/elements.mjs 206:46-55 Can't import the named export 'switchMap' from non EcmaScript module (only default export is available)

如果我没记错的话，它们是由 createCustomElement 函数调用引起的。

我试过包含一些 polyfill 和适配器，但它们因教程而异，none 解决了这个问题。我到处寻找解决方案，但没有成功。

知道我做错了什么吗？

Answer 1

您可能需要将您的组件放在 entryComponents 部分。

Answer 2

问题是我有 Angular 10.x，但是 @angular/elements 安装的是最新版本。当我将 Angular 和 Node 升级到正确的版本时，一切都按预期开始工作。

Angular 带有自定义元素错误的 Web 组件

Angular web components with custom elements error

web-component

angular