7

我开始接触 Angular 6 位，并且对 Angular Elements 以及新的库项目非常感兴趣。我有一个即将进行的项目，可能需要这两个新功能。

我需要创建可跨 Web 框架重用的自定义 UI 组件，但我也希望在 Angular 项目中使用它们时获得一流的支持。我已经按照这个教程学习了一个 angular6 应用程序，它注册了自定义元素，并将 webpack 包连接到一个文件中。然后我可以在纯 html 页面中使用该单个 js 文件，并且一切正常。

关键是在库项目中创建这些自定义元素会很棒。这样我就可以在我们的内部 npm 注册表上分发我的库，以及构建包含所有自定义元素的 js 并将其部署在 CDN 上。

是否可以在新的库项目中构建 Angular Elements？

4

1 回答 1

8

介绍

我将在这里描述的是一种拥有一个包含主要 Angular 应用程序（主机）和一个或多个基于Angular Elements的应用程序（子程序）的单一存储库的方法。您将能够通过将所有元素捆绑在一起来使用主应用程序中的元素，或者您可以使用 npm 打包元素并将其作为 npm 依赖项导入。这在很大程度上基于 Manfred Steyer 在他的Angular Elements 博客系列中所描述的内容，因此我建议您阅读该内容以获取一些上下文并填补一些缺失的部分。

但请注意，目前我在此处描述的方法无法避免跨多个应用程序的重复依赖项。

解决方案

在您现有的 Angular 项目中，您可以使用ng generate application <name>. 有关更多详细信息，请参阅文档。

将您新创建的项目转换为Angular Element。

为了帮助您构建项目，请查看ngx-build-plus 此处的 Angular CLI 扩展。对于我的情况，我没有应用ngx-build-plus文档中描述的大部分秘诀，因为它是关于跨项目共享依赖关系的，我不会在这里详细说明。我需要的只是接下来的内容。

构建这个架构的步骤大致是：

  • ng add ngx-build-plus
  • ng add ngx-build-plus --project <name>
  • 创建 npm 脚本：
    • 对于元素项目："build:client-a": "ng build --prod --project client-a --single-bundle true --output-hashing none --vendor-chunk false"
    • 对于主机应用程序，常规构建命令，例如ng build，ng serve
  • 将生成的元素 JS 文件的路径添加到主机应用程序构建配置 - 您将其添加到脚本属性中angular.json
  • 将自定义元素 polyfill JS 文件的路径添加到元素应用程序构建配置中 - 您将其添加到angular.json. 每个应用程序都有自己的配置和脚本条目。

构建元素项目后，其单个文件包通常会转到./dist/<project-name>/. 您可以从该内容创建一个npm 包并将其用作库。

笔记

  • 将子应用程序与主机应用程序捆绑在一起的两种方法。在主机应用程序脚本配置中，您可以在文件夹中添加子应用程序dist/的路径，或者在文件夹中添加子应用程序的路径node-modules/（当子应用程序作为 npm 包导入时）。

  • 为此目的创建 Angular库而不是 Angular应用程序将不起作用，因为 CLI 生成的 Angular 库不能在 Angular 项目之外使用——这在文档中不是很清楚。

  • 确保该组件不依赖于父应用程序，你应该没问题。我通过将它们转换为组件输入或进行内容投影来处理依赖关系。

  • 当您有一个包含组件 B的组件A时。您想将组件 A转换为 Angular 元素，但组件 B用于应用程序的多个部分。如果您不想维护两个副本，一个在应用程序中，另一个在您的组件 A库中，那么利用内容投影（又名Web 组件槽）可能是一个很好的案例。

  • 请注意，我没有在生产中这样做，它不是你所说的稳定架构。

于 2018-12-18T15:45:26.110 回答