问题标签 [angular-elements]

我有一些有角度的自定义元素。我想创建这些实例并在其父组件中获取它们的模型值。输入，输出方法没有帮助。你能建议我一个方法吗？提前致谢。

创建自定义元素

自定义元素用于父元素

现在我希望父元素获得消息的新值。

如何做到这一点？

我的团队处理多个 Angular 项目。对于代码重用，我们将许多表示组件提取到库中，然后在我们的各种项目中使用。

那么，鉴于我们所有的项目都是关于 Angular 的，并且我们已经使用了库，我们还能从 Angular 元素中获得什么？

我开始研究元素的原因是：

我们的大多数旧项目都在使用 Bootstrap 3。我们希望将 Bootstrap 4 与我们制作的新东西一起使用。所以我想知道一个元素是否可以用 Bootstrap 4 设计，并在用 B-3 设计的地方使用它而不会破坏？

那可能吗 ？

TL;DR：我正在尝试使用Angular Elements作为Angular应用程序的插件。--prod如果我在我的应用程序上使用它构建元素ng serve（开发设置），但是当我在我的应用程序上使用它ng serve --prod或在ng build --prod我的应用程序（生产设置）之后使用它时，它会无限重新加载。

虽然，如果我构建元素添加--optimization=false，可以与我的生产应用程序一起使用，但不适用于我的开发设置。

问题是，我期待构建一个Angular Element对这--prod两种情况都很好。

问题：有没有办法解决这个问题？

---

现在，长读。

在工作中，我们试图在我们的Angular站点中使用可配置的插件，其中服务器是告诉哪个插件处于活动状态或不处于活动状态的服务器。

我们尝试动态加载Angular模块，但这是一个完全不同的头痛问题，我们将其搁置了另一天。

所以，我们接下来想尝试的是Angular Elements，它有点工作，除非我们按照它应该的方式构建所有东西。

首先，我开始关注本教程https://scotch.io/tutorials/build-a-reusable-component-with-angular-elements/amp并忽略了所有内容，okta因为我的功能有所不同。

创建：

我使用下一个命令创建了我的核心应用程序，这将是托管插件的应用程序：

• ng new core --routing --skip-git --style scss --skip-tests --minimal

然后我使用这个命令创建了一个插件/角度元素：

• ng new plugin --skip-git --style scss --skip-tests --minimal

插入：

在所有创建之后，我进入我的插件并在 中评论了这一行polyfills.ts，我在这个站点的某个地方读到它解决了NgZone已经加载的问题，这是真的：

为了解决Angular如何创建元素的问题，tsconfig.json我改成"target": "es5"了。不太确定这是如何工作的，但stackoverflow建议它并且它成功了。"target": "es2015"

app.module.ts我按照教程中的想法和其他一些我丢失了链接的想法将其编辑为类似的内容：

注意：我添加了CUSTOM_ELEMENTS_SCHEMA因为我在某个地方找到了它，但它没有解决它（另外，我不确定它的作用）。

在app.component.ts我这样做是为了在其模板中显示一些属性：

app.component.html看起来像这样：

在package.json文件中，我有三个脚本来构建所有：

该文件build-elements.js如下所示（build-elements.noopt.js与不同的目标名称相同）：

核：

对于主机应用程序，我添加了一个名为的组件embedded，默认路由会转到它。

然后我使用一些Bootstrapembedded.component.html类将其更改为这样的：

最后，embedded.component.ts以这样的方式结束，展示了实际的加载机制：

跑步：

如果我运行ng serve并浏览到http://localhost:4200，页面加载没有问题，注入插件，将新元素添加到 DOM 并显示来自我的插件的消息。如果您调试应用程序，您会看到它已加载/assets/my-plugin.js，这是为生产而构建的。除了调试之外，这不会是一个问题。

然后，如果我运行ng serve --prod（或构建它用于生产）它也可以正常工作，但它会加载/assets/my-plugin-no-optimization.js，它是为“调试”而构建的。

这是我最终在我们的实际应用程序中使用的解决方案，但是正如您所看到的，我没有在我的插件中使用优化代码进行生产，这并不好......一点也不。

为了证明我的观点，如果我浏览到http://localhost:4200/?how-it-should-be，它将尝试为 加载优化插件ng serve --prod和为ng serve. 请注意，这会使您无限重新加载，请打开浏览器开发人员工具来查看它。

---

我们使用的最终产品要复杂得多，但这些示例的基本逻辑并没有真正起作用。

我还使用它创建了一个 GitHub 存储库，您可以在其中查看这些代码，并自己尝试解决问题，或者用作您自己想法的示例。

• https://github.com/daemonraco/angular-as-plugins

如果您想知道我是如何发现使用--optimization=false有点修复它的，那么，我试图调试这个问题（这被证明是不可能的）并且突然它加载了。

我看了看时间，对于生产部署来说已经晚了两个小时，所以我添加了那个丑陋的机制来根据环境加载不同的构建。它在开发和生产中都有效，但我并不为此感到自豪。

---

对不起，如果我的英语不好...不不不，我的英语不好，对不起^__^

我想用 ngx-leaflet 显示地图并将其用于使用 Angular Elements 构建的 Web 组件中。我面临的问题是与地图交互后新的图块没有呈现在屏幕上。

我已禁用区域并正在运行手动更改检测。我确实看到网络选项卡中加载了新的磁贴，但它们没有出现在屏幕上。我已手动将传单 css 复制到组件 css 文件中。

我按照本课配置 Angular Elements：https ://angularfirebase.com/lessons/angular-elements-advanced-techniques/

这是带有代码的 Stackblitz：https ://stackblitz.com/edit/map-element

我有静态页面，我在其中导入了自定义的角度元素

app.module.ts

我的元素.component.html

我的元素.component.ts

因此，我在 angular 元素中导入了第三方 npm 日历角度组件，该组件被注入到静态网页中。

日历被渲染和实例化，但它没有应用它的 css，因此没有按预期工作。

例如这个 ui-calendar 类，它存在但未应用

问题出在哪里？

我们有一个 Angular 7 项目，它使用 Angular Elements 生成自定义元素。此自定义元素用于 React 项目和 AngularJS 项目。当自定义元素的代码在其中一个项目中加载时，网站速度会降低大约 30% - 即使自定义元素没有呈现到 DOM 中！

性能分析表明 zone.js 中的方法 invokeTask() 和 runTask() 被频繁调用。

我尝试按照https://github.com/angular/zone.js/blob/master/STANDARD-APIS.md中的描述将事件列入黑名单，但这没有效果。

packages.json 中的依赖项是：

所以我的问题是：为什么即使自定义元素没有在 DOM 中呈现，zone.js 也会监听事件？如何使网站再次变得更快？

更新： 我也尝试将 ChangeDetection 设置为 onPush，但问题仍然存在。

我试图使用自定义元素 + NgRX 并尝试将自定义元素集成到 angularjs 应用程序中。每当从我的 angularjs 应用程序中调用自定义元素暴露方法更改检测时，都不会发生。

在 Angular js 中调用代码 const customElement= angular.element('hello-ce')[0]; customElement.refreshSettingProgressValue(settingsPage);

Angular 7 + @ngrx/store + 自定义元素中的公开方法：

我尝试通过单击虚拟按钮在 Angular7 应用程序中调用 _refreshSettingProgressValue _ 并且一切正常，但是当我在 Angular 上下文之外调用它时，我无法看到 UI 中的更改。PS LoadSettingsProgressValue在我们调用一些 api 的地方有效果。我看到调用也在发生，reducer 也在更新状态，但更改检测似乎没有启动。

我已经尝试过ngzone-element-strtergy但它没有解决我的问题

我相信我们可以明确地调用changeDetection，但是使用ngrx我们如何以及在哪里可以做到这一点？

谢谢

以下起点：

我们有一些 Angular 前端微服务，现在我们想将它们整合到一个应用程序中。我们正在尝试 Angular-Elements 方法，并且我们已经导出了一个产生巨大 JS 文件的微服务。

问题

当我们在“bring it together”项目中包含 angular 元素时，只是“router-outlet”标签在 dom 中，但没有呈现 html。

代码

自定义元素：

app.module.ts：

应用程序路由.module.ts：

带上它的项目： 这些来自应该处理这个特定微服务的组件

电话合同.component.html：

app.module.ts：

可能重要的东西？

• 我们将其用作我们的“构建器”：“@angular-devkit/build-angular:browser”，

• 我们认为问题在于自定义元素无法解析路由，因此什么也不显示，这可能是真的吗？

我们正在尝试构建一个应该在 AngularJS 项目中使用的 Angular 元素（使用 Angular 7）。输出 .js 文件有 5 MB 大……太多了。

使用 webpack-bundle-analyzer 进行的分析表明，大部分空间都被 AngularJS 项目中也需要的依赖项所使用——在代码中不需要两次包含库。

所以我的想法是将这些依赖项声明为 package.json 中的 peerDependencies。我希望输出文件会变小。但不幸的是，peerDependencies 的构建结果在 size 上是相同的。我误解了 peerDependencies 的概念还是我需要一个特殊的构建参数？

例如，Devextreme 依赖项需要 1,88 MB 的磁盘空间，也作为对等依赖项。

我在 Angular Element 项目中延迟加载功能模块。

如果在我的延迟加载模块路由中有一个带有组件和子模块的路由，所有模块路由都停止工作并出现错误：

在这里，您可以看到问题的堆栈闪电。测试项目是从这个Angular 教程 Stackblitz中派生出来的，唯一的变化是 Elements 需要的。

我遗漏了一些东西，或者这是一个 Angular Element 错误？