问题标签 [angular-elements]

我正在创建一个应该嵌入多个外部站点的角度元素。

嵌入过程将只是对已编译脚本的引用和表示该元素的 DOM 元素：

但问题是该元素使用了一些 .png、.svg、.gif 和 .jpg 格式的资源。

当然，在不同站点上使用的编译元素不能引用这些资源。

角度元素的文档非常有限，甚至 Angular Docs 都没有说明这一点。

实现这一目标的最佳方法是什么？我见过一些人将资源转换为数据并以这种方式呈现。

我一直在使用 Angular Elements 并尝试尽可能实现最佳的浏览器兼容性。但是我似乎走到了死胡同，因为当我为 Shadow DOM 添加 IE polyfill 时，它会破坏 chrome 中的元素。

最初我遇到错误“无法构造 HTML 元素”，因此我将 tsconfig.json 中的“目标”更改为 es2015/es6。

tsconfig.json

零件

更改目标碰巧破坏了 IE，因为不支持 es2015/es6+。所以我碰巧在@webcomponents 包中找到了custom-elements-es5-adapter，它包装了ES5，为需要它的浏览器提供必要的ES6 功能。然后我还必须添加对自定义元素的支持。

polyfills.ts

此时它可以在 Chrome 中运行，但我在 IE 中收到以下错误

SCRIPT438：对象不支持属性或方法“attachShadow”

所以我尝试通过在我的 polyfills.ts 中添加以下内容来为 Shadow DOM 添加 polyfill：

这似乎解决了 IE 中的问题，但现在在 chrome 中给了我以下错误：

未捕获的类型错误：无法读取未定义的属性“defineProperties”

我正在尝试将一些各种外部库集成到我自己的组件中，以用作我正在构建的仪表板的一部分。为简单起见，我正在尝试制作一个具有折线图、图形仪表以及更多信息作为概览项的 Angular 元素。

我在这个简单的例子中使用了 ngx-charts。我已经获取了 ngx-charts 示例编号卡，并将示例中的 html 放入我的主 overview-item.component.html 中。将示例 typescript 代码添加到 overview-item.component.ts 后，一切正常，包括我的测试应用程序。

这有效并在我的页面上绘制示例。我现在正试图将其中一些代码从主文件中移出，放入可以重复使用的组件中，并且组件本身目前没有模块文件。

overview-item.component.html 不再有，但将具有生成的组件，即 . 如果我从 HTML 中删除，并插入一个没有图表的新生成的，它仍然有效。

我的号码card.component.html

请注意，我没有更改模块或测试文件中的导入或其他任何内容，我只是在移动代码。

概述-item.module.ts

编辑添加了 my-number.component.ts

现在，当我将 html 添加到 my-number-card HTML 和 Typescript 文件中时，就会出现问题。

当我这样做时，overview-item.component.spec.ts 文件现在抱怨错误：

测试文件保持不变，除了 MyNumberCardComponent 的导入，现在它已移动到主组件的子目录和组件。

我添加了参考错误的模式，但它们没有帮助。另一个问题是错误与方括号中引用的所有可以传递的值有关。

我确信我在做一些愚蠢的事情，但我似乎无法克服这一点。我的代码在父组件中时有效，但添加子组件ng generate component似乎不起作用。

我需要编写一个可重用于我们不同应用程序的模块，它需要使用路由、表单、选项卡...使用 Angular 元素制作 Web 组件是否有意义，或者创建一个更好的主意图书馆呢？

我们当前所有需要这个模块的应用程序都是在 Angular 中制作的，我们公司希望继续将 Angular 用于我们的 Web 应用程序，但是，谁知道将来我们是否会使用 React 或其他 JS 库或框架......

编辑：该模块仅供内部使用，不适用于客户端。它将包括对我们所有应用程序共有的不同资源（类型、语言、状态......）的 CRUD 操作的功能。这些中的每一个都将在一个选项卡中表示，因此，例如，在语言选项卡中，您将看到一个带有分页显示所有语言条目的表格，您可以创建新的语言来填充表单、编辑语言并删除它们。

我有一个现有的 Angular 6 项目，我们希望构建一个 Angular 元素作为主应用程序模块的子元素。

那可能吗？

我尝试添加一个新的自定义组件并使用 createCustomElement 进行注册。但是，由于它是一个子组件，并且不在 a​​pp.component.ts 的选择器标签中，所以它永远不会被拾取。构建文件没有对创建的新自定义元素的任何引用。

Angular 社区是否扩展了这个功能？

当我为我的元素赋予驼峰式属性时，它们不起作用。没有错误或警告。但是当我传递所有小写属性时，它们运行良好。有人可以解释这种行为吗？

我的index.html：

user-poll.component.ts

我有一个角度项目中最简单的角度元素。我在属于角度元素的组件中抛出错误，如下所示：

仪表盘-tile.component.ts用户，<dashboard-tile a="100" b="50" c="25"></dashboard-tile>如index.html

但我在 chrome 控制台中没有看到任何错误。有人可以请教吗？

链接到视频。链接到 github repo包含代码。

编辑：

测试：

1. 我已经在 chrome 和 firefox 中对其进行了测试。它在两者中都可重现。
2. 如果我将上述组件视为普通组件（具有<app-dashboard-tile><app-dashboard-tile/>in app.component.ts），则异常会显示在控制台中

一张纸条：

1. 这个问题是关于角度元素而不是关于常规角度项目。很容易忽略这一点。

2. 如果您可以克隆项目并在本地运行它，那就太好了。不会超过 2 分钟。

设想

创建了 2 个不同的 Angular 元素（通过 2 个单独的项目）

• 第一个完全按照本教程进行 - 不属于本文的一个更改是我必须执行“npm i document-register-element@1.8.1”才能使演示工作
• 第二个使用获取rest api结果并创建页脚的服务

问题 1

在 IE 11 上，我们得到：

对象不支持“来自”[jsFileName].js 的属性或方法 (4,119596)

问题 2

Firefox 上的空白页，控制台上没有错误，开发人员工具中的任何地方都没有错误

经测试

测试运行页面

• 使用“静态服务器”和http://localhost:9080
• 通过直接访问构建文件 file:///D:/.../elements/index.html 进行测试

我们知道，自从 Angular 7.3...

• polyfills.ts 发生了重大变化，应该支持 IE9、10、11（参考：https ://angular.io/guide/browser-support ）
• 为了更加确定，我安装并导入（classlist.js 和 web-animations-js）以下 2（如 polyfills.ts 中的指示）
• 我不需要导入这两个，但想不遗余力。我们知道 CLI 会生成一个包含旧浏览器所需的所有 polyfill 的包，称为 es2015-polyfills.***.js，并将其添加到 index.html 中。
• 这两个项目都可以在 Chrome 上运行
• 这两个项目都在 Firefox 65 上提供了一个空白页面
• 加载的 HTML & JS 文件的内容是正确的，所以 js 文件正在被 chrome、IE11 和 Firefox 访问

寻找有关如何使用 Angular Elements 的指南，这些元素可以在其他浏览器中使用，尤其是 Internet Explorer 11。

到目前为止，遵循使用 ngDoBootstrap 定义自定义元素（Angular Element）的推荐约定。它仅适用于 Chrome，但对于 IE，元素标签在 DOM 中可见，但浏览器上没有显示任何内容。架构如下：组件、服务、管道……都被分成模块。

然后使用 customElements.define() 定义父组件。一旦将其应用到 DOM 中，诸如单击事件更改检测之类的操作在 chrome（当前版本：72.0.3626.121）中运行良好，但在 IE 中没有任何显示。我花了几个小时研究让它在 IE 中工作的不同方法。我查看了此处提供的一些问题和答案，尤其是使用 polyfills 但没有成功。

然后，我尝试按父 > 子的顺序一次定义一个组件，但又遇到了不同的问题，IE 开始抛出脚本错误，特别是与 zone.js 和 vendor.js（但不是在 chrome 中）有关。这样做时，我能够看到元素，但操作和更改检测不起作用。

我在这里尝试了这种方法，但后来开始遇到依赖注入错误。到目前为止，一个问题导致另一个问题。

选择使用 AngularElements 的原因是尝试将其与使用不同技术堆栈编写的现有项目集成。

如您所知，“ng g library”方法帮助我们创建可重用组件的库。但是，如果我希望通过 Angular Elements 的支持将这些组件编译成 Web 组件呢？不仅如此，lib 中的每个组件都将被编译到自己的文件夹或 JS 文件中。如何配置可以让我实现这一目标的开发环境？

例如：

如果我创建一个Lib并添加一个自定义组件，我知道我可以编译它，生成一系列文件夹，例如esm5，esm2015，fesm5等。现在，问题是：我如何添加，比如说30个自定义组件添加到我的库中，然后当我编译时，它会为每个组件创建一个文件夹，其中包含它们的 Web 组件版本......好像 Angular Elements 遍历了我的组件库并生成了每个组件的 Web 组件版本.

像这样：

变成类似的东西：

我找到的最接近的解决方案是：

https://medium.com/@rahulsahay19/running-multiple-angular-elements-on-the-same-page-5949dac5523

我还请求 Angular CLI 团队提供帮助：

https://github.com/angular/angular-cli/issues/13999