问题标签 [angular-elements]

我们有 Angular 应用程序（版本 6.1.5），它向 Restfull API 发出 HTTP 请求。

我们在 Angular App 中使用了模块化方法。有应用级别的路由配置，每个模块都有自己的路由配置。

这个设置非常好，运行起来没有任何麻烦。

现在根据我们的新要求，我们需要将此 Angular 应用程序与 VueJS 应用程序一起使用。

在我们最初的研究之后，我们使用了 Angular Elements 并创建了 Angular 构建。我们在 VueJS 中使用了这个构建（包含 JS 和 CSS 文件），我们认为它运行良好，直到我们在 VueJS 应用程序上点击刷新。

一旦我们点击刷新，Angular 应用程序路由就不起作用了，我们只会看到空白屏幕。

所以我们想知道的是，我们使用角度元素的方法是否正确。或者有没有更好的方法在 VueJS 应用程序中使用 Angular 应用程序。

谢谢你的帮助。

我面临一个奇怪的问题，想知道你们中的一些人是否也面临同样的问题。我们实际上正在使用本教程使用 @angular7 和 @angular/elements 制作自定义元素库：https ://medium.com/@aks1357/getting-started-with-angular-elements-d13a967b03df

问题是，它在运行时工作得非常好，ng serve但是一旦我们使用我们的库构建应用程序，ng build --prod我们就会开始收到关于正则表达式或超出最大堆栈调用大小的错误。

我发现问题在于在生产模式下将优化标志设置为 true。但我不明白为什么缩小代码会破坏事情。

你们中有人遇到过这个问题吗？

不幸的是，我不能分享代码，因为你好 NDA。

我正在尝试通过库 L(customElements.define('my-custom-element', myComponent)) 的 AppModule 的构造函数导出库 L 中定义的角度自定义元素。

在导入库 L 时，我的 Angular 应用程序在使用该元素时抛出异常，

这是我的 public-api.ts 文件：https ://github.com/sanjay51/IxAngularFramework/blob/master/projects/ix-angular-elements/src/public-api.ts

我找不到是否可以从库中导出自定义元素。在这方面的任何指导将不胜感激。

谢谢。

更新：

以下是我的消费方式，以及我如何声明我的自定义元素：https ://github.com/sanjay51/IxAngularFramework/blob/master/src/app/app.module.ts

这种方式出现的问题是，我的自定义元素被渲染了两次，一次作为组件，第二次作为自定义元素。

这是一个快照：https ://pasteboard.co/IkQtuJp.png

我想做什么？

我想widget/plugin为 Angular 8 创建框架。

到目前为止我尝试了什么？

经过大量阅读，我做了一个带有角度元素的 POC ，我可以使用本文中提到的命令分别构建每个组件

问题是什么？

假设我创建了组件 A 和 B，它们都使用 rxjs、httpclint 和 angular 的 reactiveforms 模块。当我构建它们并将它们导入到名为 parent-app 的第三个 Angular 应用程序中时，由于它们的包文件中都有所有这些模块，因此我在父应用程序中复制了依赖项，因此大小很大。

我想要的是？

我想在构建我的角度元素时排除常见的角度依赖性。

问题：

1. 是否可以从构建中排除 http-client 和 rxjs 等常见依赖项？

2. 还有其他方法可以创建角度小部件架构吗？

我从Stack Overflow尝试了很多解决方案，但没有一个解决方案有效。

我正在使用ControlValueAccessor并创建一个可重用的WebComponent，以便我可以访问其他项目中的组件或元素。

为此，我在其他 Angular 项目中创建了一个JS文件，但它显示错误imported

名称为“电子邮件”的表单控件没有值访问器

我还尝试添加ngDefaultControl到自定义输入组件，因为我的输入消失了。

CustomEmailComponent.html

CustomEmailComponent.ts

应用模块

下面是其他 Angular 项目的代码

HTML 文件

索引.html

我正在尝试使用 Angular Elements 从 AngularJS 迁移并有一个 AE 自定义组件工作，我做了一个合并，它停止工作。

自定义元素被加载，我可以从中看到文本，但是，我没有看到我的任何角度组件或角度材料组件。构造函数和 ngOnInit 都会触发。所以它似乎找不到我的组件或角材料。

app.module.ts

d6-order.companent.html

我正在使用 Angular Elements 来创建 UI 工具包。我正在使用插槽进行内容投影。问题是每当我使用插槽时，当插槽内容为空时 - 插槽的 dom 元素仍然存在。

这是我正在使用的 UI 组件的代码

以这个为例，即使用户没有使用 header_icon、header_top_title、header_top_right 插槽 -> 这些插槽已经注入 DOM（并且还会出现诸如边距、背景等样式 - 这使元素看起来很丑）

我能为此做些什么？

我的项目中有 4 个角度元素（Web 组件）。我在 index.html 中为这些 Web 组件添加了脚本标记，<script src="web-angular-element.js"> </script>我想在我的 Angular 应用程序中动态显示这些元素。我只是使用组件选择器在应用程序中显示它，并且选择器的名称来自像这样的服务''基于用户访问。

widgets.code = <component-name></component-name>即使我尝试了“ngTemplateOutlet”，这里的小部件代码也无法正常工作

在这里，我正在传递小部件代码，widgets.code = "abc"并且基于我试图呈现组件的代码

我正在尝试构建一个 Angular 应用程序来封装其他 2 个 Angular 项目，因为 2 个独立的团队负责这些项目，并且他们需要能够单独发货。我们决定使用角度元素。我们需要它们能够在联合登录页面后加载，并且它们不需要同时显示。我能够将项目导出为角度元素并将其导入父应用程序的 index.html但我无法让它在组件内部工作

我已将脚本添加到index.html文件中，并启用CUSTOM_ELEMENTS_SCHEMA但应用程序抛出错误

我也尝试将 js 文件添加到 angular.json 的脚本部分，但这也不起作用。当我尝试通过顶部的导入命令添加它们时，它也会引发错误app.component.ts

我已经设置了一个应用程序，它使用 angular custom-elements 包从 angular 7 导出 Web 组件。一切正常。我可以使用元素实例从 javascript 中绑定任何东西、数组、对象、字符串：

当我尝试绑定到文字 false 值时，问题就来了：

这不会改变组件上的任何内容 @Input myBooleanInput = true 该值永远仍然为真。无论它更改为 false 多少次。

我能够将它绑定为一个真实的值，它呈现得很好。问题仅在使用文字 false 时。

这是此问题的有效复制： https ://stackblitz.com/edit/angular-elements-official-example-q4ueqr

提前致谢。

PS：如果我在另一个 Angular 应用程序中使用 Web 组件，则绑定工作正常。