问题标签 [angular-elements]

我已经按照这个很棒的指南成功地创建了一个 Angular Elements 应用程序。

“服务”过程包括：

1. 将应用程序和 concat 构建成单个 js 文件ng build --prod --output-hashing=none && cat dist/tamigo-calendar/{runtime,polyfills,scripts,main}.js > ./plainHTML/ship.js
2. 现在提供一个包含自定义元素的 HTML 文件。在这种情况下lite-server。

但是每次我对自定义元素进行更改并且不想看到它更新时，我都需要重新运行构建脚本。所以我的问题是，如何在手表模式下构建它？

我的相关部分package.json如下所示：

我正在研究 Angular Elements 并考虑将我们的 Angular 组件生成到 Angular Elements 中，以使其可以在 Angular 应用程序之外使用。

假设我有一个 Angular 4 应用程序，它导入两个不同的 Angular 元素（内置在 Angular 7 中）并将它们呈现在同一页面上，并在我的 Angular 4 组件中实例化一个服务。该服务包含我想要传递到我的 Angular 元素中的数据，因为 Web 组件只接受字符串作为属性（输入），有没有什么好的方法可以在服务实例之间共享数据/将服务实例传递到 Angular 元素中？

我一直在使用 Angular Elements 来构建微前端，当每个微前端都是一个完全隔离的微前端时，一切正常。

但是，我注意到如果 Angular Elements 嵌套使用来自多个微前端的组件，这会引入一些 UI 问题，这些问题很难修复

例如，以这种方式嵌套组件会导致以下问题：

- 更改检测需要手动触发（见https://github.com/angular/angular/issues/24061）

-Transclusion 无法正常工作（请参阅https://github.com/angular/angular/issues/24536）

- 无法动态创建或销毁组件（可能与上面的变更检测问题有关）

用例是另一个微前端引用的可重用 UI 组件（例如按钮或数据表）。

对此的替代方法是将通用 UI 组件作为 NPM 依赖项包含在每个微前端中。但是，这种方法的缺点是，如果常见的 UI 组件发生变化，我就需要重新构建每个消费应用程序。

有没有人有什么建议？重要的是每个微前端都可以独立构建和部署，因此应该将其作为运行时 JS 包含而不是作为 NPM 依赖项来引用。

从我目前的研究来看，Angular Elements 似乎是为独立的微应用设计的，而不是一个可以跨多个微前端共享的 UI 组件库。

谢谢，

亚历克斯

我正在尝试创建一些可以在广泛的客户站点上使用的自定义 angular 7 元素/组件。外汇。Wordpress、Angular 前端等等。

设置

我已经捆绑了这样的角度元素进行测试：
package.json 命令：

构建脚本.js：

问题

我创建了另一个 Angular 7 站点，其中我将 js 文件包含在索引文件中，但出现以下错误： 在此处输入图像描述

然后我只有一个空白页.. :(

我已经围绕这个问题做了一些研究，现在我不确定这是一个错误还是我的实现有问题。

我有一个使用服务来获取一些数据的元素，然后它将数据传递给一个子元素，但是当我更新数据时，我得到了那个错误。

父元素

父元素视图

子元素

子元素视图

应用模块

指数

当我加载应用程序时，一切都很好，但是如果我单击计数按钮，我就会遇到该错误。

我想在这里为小部件使用角度元素。

我浏览了angular.io 示例 以及angular-aio-src

我在这里遗漏了一些东西。这是演示。

我收到此错误：

Component ContentNotAvalilableComponent is not part of any NgModule or the module has not been imported into your module.

我见过的所有示例都是作为单独的模块创建的/手动引导是为了嵌入该模块。但我正在尝试类似 angular aio 的东西。使用 AppComponent 引导延迟加载角度元素。不知道这里出了什么问题？

不知道为什么在可重用模块上会发生这种情况（或者我做错了什么）。

ERROR 错误：未捕获（承诺中）：错误：模板解析错误：'fa-icon' 不是已知元素

仅供参考：fa-icon是一个 Font Awesome 元素

工具栏-fab.component.html：

工具栏-fab.component.ts：

工具栏-fab.module.ts：

机身列表.component.html

机身列表.component.ts

机身列表.module.ts

感谢您的帮助！

Is it possible to unregister a custom element that has been created by createCustomElement?

We use Web Components to wrap out vertical features, all 'parts' of the feature are downloaded before the Web Component is added to the DOM.

What we would really like is to completely destroy the component when the feature is no longer active but there it looks like there is no API available.

Has anyone had any luck with this?

我正在尝试将表单控件导出为 Angular 元素（Web 组件）并将其用作本机输入元素，以便它可以与角反应式表单或与本机 html 输入一起使用的类似库一起使用。

波纹管代码在作为模块中的角度组件导出时有效。当我将其导出为 Web 组件并尝试以反应形式使用它时，我遇到了问题。

此代码是使用 Angular 7.1 框架编写的。

组件模板

组件代码：

模块代码：

用法示例：

上面的代码会导致错误：ERROR 错误：表单控件没有值访问器，名称为：'text'

有没有更好的方法来构造这个组件，使其表现得更像原生输入？

我正在使用以下标准进行概念验证：

1. 允许每个菜单项位于不同的 Bitbucket 项目中。
2. 在不破坏其他组件的情况下构建单个组件。
3. 组件可以相互通信。
4. 如果其中一个组件更新，所有应用程序都必须自动查看该组件的最新版本。
5. 所有团队都将使用以下版本：
   • 角 CLI：7.0.7
     
   • 节点：10.13.0
     
   • 角度：7.0.4
     

我使用 Angular 元素做了一个示例，扩展了 HTML。
每个 Angular 团队通过注册其标签生成 JavaScript 文件（team1.js、team2.js、team3.js）来进行部署。

例子：

具有菜单的主 Angular 应用程序导入 JavaScript 文件（team1.js、team2.js、team3.js），当单击每个菜单时，标签会在 div 主目录中动态创建。

例如，如果任何团队需要访问 Web 服务来填充表格，则表格会在之前呈现。
因此，我在 web 服务中执行请求，然后动态创建表标记并将参数传递给流行。
在 Angular 项目中，它可以正常工作而无需此操作。但是对于 Angular 元素，我就是这样：

所有这些都有效，但我发现很难使用 createElement。

我可以在主项目中提出这个网络服务请求并通过参数：

有了这个，对 web 服务的所有请求都将在主项目中，所有团队都必须在这个项目中编码。

1. 还有其他可能性吗？
2. 你能继续那样做吗，但用一种不那么复杂的方式？