带有自定义元素误差的角度web组件

Question

我试图创建一个基本的网页组件的角度与角元素。

到目前为止，我所做的工作如下：

在npm i @angular/elements --save

• Installed npm i @webcomponents/custom-elements -- save

• Added app.module.ts

• Created中使用CUSTOM_ELEMENTS_SCHEMA到schemas数组安装了元素--组件，使用下面的代码将其称为MyComponent

• Defined MyComponent作为AppModule中的自定义元素

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

在完成所有这些工作之后，运行npm start会给出以下错误：

./node_modules/@angular/elements/fesm2015/elements.mjs 328中的

错误:49-63无法从非EcmaScript模块导入指定的导出“ApplicationRef”(只有默认的导出可用)

./node_modules/@angular/elements/fesm2015/elements.mjs 323中的错误:68-85无法从非EcmaScript模块导入指定的导出“ChangeDetectorRef”(只有默认的导出可用)

./node_modules/@angular/elements/fesm2015/elements.mjs 123中的错误:50-74无法从非EcmaScript模块导入指定的导出“ComponentFactoryResolver”(只有默认的导出可用)

./node_modules/@angular/elements/fesm2015/elements.mjs 187中的错误:25-49无法从非EcmaScript模块导入指定的导出“ComponentFactoryResolver”(只有默认的导出可用)

./node_modules/@angular/elements/fesm2015/elements.mjs 320中的错误:30-38无法从非EcmaScript模块导入指定的导出“注入器”(只有默认的导出可用)

./node_modules/@angular/elements/fesm2015/elements.mjs 233中的错误:40-46无法从非EcmaScript模块导入指定的导出“NgZone”(只有默认的导出可用)

./node_modules/@angular/elements/fesm2015/elements.mjs 204中的错误:33-46无法从非EcmaScript模块导入指定的导出“ReplaySubject”(只有默认的导出可用)

./node_modules/@angular/elements/fesm2015/elements.mjs 404中的错误:42-54无法从非EcmaScript模块导入指定的导出“SimpleChange”(只有默认的导出可用)

无法从非EcmaScript模块导入指定的导出“版本”(只有默认导出可用)

./node_modules/@angular/elements/fesm2015/elements.mjs 346中的错误:32-35无法从非EcmaScript模块导入指定的导出“映射”(只有默认的导出可用)

./node_modules/@angular/elements/fesm2015/elements.mjs 206中的错误:68-73无法从非EcmaScript模块导入命名的导出“合并”(只有默认的导出可用)

./node_modules/@angular/elements/fesm2015/elements.mjs 206中的错误:46-55无法从非EcmaScript模块导入指定的导出“switchMap”(只有默认的导出可用)

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

我尝试过包括一些多填充和适配器，但它们是不同的教程，没有解决这个问题。我到处寻找解决办法，但都是徒劳。

知道我做错什么了吗？

Answer 1

问题是我有角10.x，但是@angular/elements安装了最新版本。当我升级以修正版本时，一切都开始像预期的那样工作。

Answer 2

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