具有自定义元素错误的角度 Web 组件

Question

我试图在和创建一个基本的web组件

到目前为止，我已经完成了以下工作:

1. 使用 npm i @angular/元素的已安装元素 --保存
2. 已安装 npm i @webcomponents/自定义元素 -- 保存
3. 将CUSTOM_ELEMENTS_SCHEMA添加到 app.module.ts 中的架构数组
4. 已创建组件，将其称为 MyComponent
5. 使用以下代码将 MyComponent 定义为 AppModule 中的自定义元素

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

完成所有这些操作后，运行 npm start 会给我以下错误：

中的错误。/node _ modules/@ angular/elements/fesm 2015/elements . mjs 328:49-63无法从非EcmaScript模块导入命名导出“ApplicationRef ”(仅默认导出可用)

./node_modules/@angular/elements/fesm2015/elements.mjs 323：68-85 中的错误 无法从非 EcmaScript 模块导入命名导出“ChangeDetectorRef”（只有默认导出可用）

中的错误。/node _ modules/@ angular/elements/fesm 2015/elements . mjs 123:50-74无法从非EcmaScript模块导入命名的导出“ComponentFactoryResolver ”(仅默认导出可用)

./node_modules/@angular/elements/fesm2015/elements中出错。mjs 187:25-49无法从非EcmaScript模块导入命名导出“ComponentFactoryResolver”（只有默认导出可用）

错误。/ / fesm2015 node_modules / @angular /元素

错误。/ / fesm2015 node_modules / @angular /元素

错误。/ / fesm2015 node_modules / @angular /元素

./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/fesm 2015/elements . mjs 206:68-73无法从非EcmaScript模块导入命名的导出“merge ”(仅默认导出可用)

错误。/ / fesm2015 node_modules / @angular /元素

如果我没弄错的话,他们是由<代码>

我试着包括一些polyfills和适配器,

你知道我做错了什么吗？

Answer 1

你可能需要把entryCom组件

Answer 2

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