angular - 我可以拥有在单个 js 文件中发出 Angular 元素的 Angular 库吗？

Question

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

我需要创建可跨 Web 框架重用的自定义 UI 组件，但我也希望获得一流的支持，以便在 Angular 项目中使用它们。我已经关注了这个 tutorial并拥有一个注册自定义元素的 angular6 应用程序，并将 webpack bundle 连接到一个文件中。然后我可以在纯 html 页面中使用该单个 js 文件，一切都运行良好。

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

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

Answer 1

简介

我将在这里描述的是一种方法，让mono-repo 包含一个主要的 Angular 应用程序(宿主)和一个或多个基于 Angular Elements 的应用程序(childs) .您可以通过将所有元素捆绑在一起来在主应用程序中使用这些元素，或者您可以使用 npm 打包您的元素并将其作为 npm 依赖项导入。这在很大程度上基于 Manfred Steyer 在他的 Angular Elements blog series 中描述的内容。所以我建议您阅读它以获得一些背景信息并填补一些缺失的部分。

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

解决方案

在您现有的 Angular 项目中，您可以使用 ng generate application <name> 创建一个子应用程序.参见 documentation了解更多详情。

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

为了帮助您构建项目，请查看 Angular CLI 扩展 ngx-build-plus here .对于我的情况，我没有应用 ngx-build-plus 中描述的大部分配方。 docs 因为它是关于跨项目共享依赖项的，我不会在这里详细说明。我所需要的只是以下内容。

搭建这个架构的步骤大致是:

• 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时。您希望将 component A 转换为 Angular 元素，但 component B 在您的应用程序的多个部分中使用。如果您不想维护两个副本，一个在应用程序中，另一个在您的组件 A 库中，那么 take advantage of content projection 可能是一个很好的案例。 (又名 Web Component slots )。

• 请注意，我没有在生产环境中这样做过，这不是您所谓的稳定架构。