问题标签 [angular-elements]

我使用 Pascal Precht 的教程通过 Angular 构建了一个简单的 Web 组件，您可以在这里看到它的工作原理。它在链接中的 Stackblitz 上自动神奇地编译，但不是在本地编译。

我的最终目标是将生成的 Web 组件的代码放在本地的单独文件中。最终，我会将它上传到某个地方并通过单个<script>标签将其拉入，就像普通的 raw-html/javascript Web 组件一样。我认为这个问题不言自明，但如果您愿意，可以阅读以下详细信息：

总结上面链接中的代码，我有一个非常基本的组件：

我有一个模块：

以下是对上述模块的解释：

1. 将我的组件添加到entryComponents数组中，这样它就不会被 angular tree-shaker 取出（因为它在应用程序启动时无法访问： entryComponents: [HelloComponent]

2. 通过该函数运行我的组件，createCustomElement以便我可以将其用作常规 html Web Component：

   const HelloElement = createCustomElement(HelloComponent, { 注入器: this.injector });

3. 最后，我要求 Angular 编译这个组件main.ts：

   platformBrowserDynamic().bootstrapModule(AppModule);

这是我完全阅读/观看的内容（在许多其他链接中——其中大部分都已过时，例如原始的 Angular Elements 介绍）：

Web Components from Scratch by Tomek Sułkowski（他从不单独编译）
Web Components with CLI（同样的问题）
Web Components by Academind（再一次，这个人也在 Angular 应用程序中使用它们）

感谢您的任何帮助。

我有一个角度元素custom-element，它发出一个事件action，我可以使用 -

所以我能够收听custom-element. 但我也想听custom-element主机发出的事件。我怎样才能做到这一点？

我能想到的一种方法是将 observable 作为输入传递并custom-element订阅它。这是一个很好的解决方案吗？

谢谢

我有一个角度元素，带有自定义标记名 - fancy-button。如何嵌入fancy-button角度应用程序？

我尝试了以下方法，但都没有奏效-

1. index.html/angular.json[scripts]导入并嵌入fancy-button的角元素脚本app.component.html（在角应用程序中运行的根组件）

2. 导入的角度元素脚本app.component.html并嵌入fancy-button（app.component.html角度应用程序中运行的根组件）

谢谢

所以我有这个简单的组件：

在构建我的组件并将其添加到一个简单的 angularJS 应用程序之后，（我需要向旧应用程序添加一个自定义元素）我在控制台中获得了带有默认文本和 http.get 结果的元素，但我的组件还没有更新了，如图。

我显然错过了一些对我来说并不明显的东西。关于为什么内容不更新的任何想法？提醒一下，此功能已发布但处于实验状态，也许就是这样。

作为参考，这是我的 app.module.ts：

我最近开始玩一些在 Angular V6 中发布的 Angular 元素，为此我打开了一个小型沙盒项目。 https://github.com/Slash7GNR/ndv-angular-elements 现在我尝试向我的 Web 组件添加更复杂的输入 - 我尝试添加数组输入，如下所示：在 app.component.ts 我'已添加：

在我添加的模板中：

然后，我创建了一个静态 html 文件并添加了以下代码：（pls-wrk 是一个由 Angular 元素功能生成的 Web 组件）

我收到以下错误：

未捕获的错误：找不到“字符串”类型的不同支持对象“哇，哇 2”。NgFor 仅支持绑定到 Iterables，例如 Arrays。

我也尝试过通过元素本身绑定一个数组，如下所示：

但这都不起作用。

我也尝试绑定作为对象的输入，但在 html 中看不到结果。

这里有人可以成功地将数组/对象作为输入传递给角度元素吗？

我有以下问题。我有一个使用 Angular 6 和路由系统构建的应用程序。我想创建一个包含此应用程序的 Web 组件，并能够将其用作不同 Web 应用程序的一部分。我已遵循本教程，并根据我的需要对其进行了修改：https ://codingthesmartway.com/angular-elements-a-practical-introduction-to-web-components-with-angular-6/

结果是屏幕上没有呈现任何内容，现在浏览器中存在错误Error: The selector "app-root" did not match any elements。

在浏览器源文件上，我可以确认包含我的 Web 组件的 js 文件已成功加载。

这是我所拥有的：

在 app.module.ts

在这里，我的 index.html 来测试自定义元素

关于这个问题有什么建议吗？

提前致谢

我有一个项目可以在 Gmail Chrome 扩展中插入角度元素，以注入我在其中使用的元素inboxSDK（也可以使用 vanilla JS 制作）。问题是输入事件中的意外行为keyup以及角度材料无法正常工作。

例如，<mat-menu>仅在第二次单击时打开，并且输入的matInput指令动画未应用于焦点。该事件的另一个有线问题keyup是某些键未显示在输入端。我看到事件发生了，但是当我检查（空格和 v 等）时输入内的文本没有改变，但是当我检查纯 html 中的角度元素时，一切都按预期工作。在 gmail chrome 扩展程序中有何不同？

为了编译 Angular 元素，我使用了 Medium 网站上的 Angular 6 博客文章这个实用的 web 组件介绍中的说明

附件是我的 Angular 元素代码：

和扩展代码：

根据我的检查，当我在没有 inboxsdk 的其他网站上使用扩展程序时，会发生输入事件的行为。双向绑定也停止工作。

我们使用 Angular 6.0.3 构建了一个仪表板，它是使用 Angular CLI 构建的。

我们正在尝试使用 @angular/elements 创建独立的 Web 组件，这些组件也可以作为小部件重用。这些 web 组件正在加载到 DOM 中并且都正常工作。

问题是这些小部件的捆绑包非常大 - 它们使用与仪表板相同的 Angular 版本，因此我们的小部件可以重用这些已加载的部分。

问题：这甚至可能吗？我们可以在完全独立的 web pack 包之间共享 @angular/core 吗？

我们已经尝试使用Angular Webpack Externals，它大大减少了包的大小（显然），但是所有的 Angular 引用都失败了

我正在尝试转换我的角度组件，以便它可以在角度和非角度环境中运行。

我已将我的元素添加为导出并将它们添加到自定义元素列表和条目组件列表中，以便它们将作为自定义元素导出。

下面是我的angular-liberary模块导出的代码

然后在 app 模块中作为 forRoot() 导入。

当我从如下所示安装的 npm 导入时，它给了我以下错误

当我直接将它们作为内部模块导入如下时，会出现以下错误。

仍在调试，任何帮助将不胜感激。

I am getting this error when I try use a module which have custom components using angular-element.

I try to use that module in my app as CoreModule.forRoot(). It have exported components and these same components are listed as entry component and custom component.

When I drilled down to the code, I found that the generated javascript line below is causing the error.

Same line in source code in angular

Error message: