我可以在单个js文件中使用能发出Angular元素的角度库吗？

Question

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

我需要创建可在Web框架之间重用的自定义UI组件，但我还希望获得在角项目中使用它们的一流支持。我已按照本教程进行操作，并拥有一个angular6应用程序，该应用程序注册自定义元素，并将webpack捆绑包合并到一个文件中。然后，我可以在纯HTML页面中使用该单个js文件，并且一切正常。

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

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

Answer 1

介绍

我将在这里介绍一种方法可以有一个单回购包含主角度的应用程序（主机）和一个或多个角元素基于应用程序（孩子的）。您可以通过将所有元素捆绑在一起来使用主应用程序中的元素，也可以将元素与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文件的路径添加到元素应用构建配置-您将其添加到的scripts属性中angular.json。每个应用程序都有其自己的配置和脚本条目。

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

笔记

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

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

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

• 当您的组件A包括组件B时。您希望将组件A转换为角度元素，但应用程序的多个部分都使用了组件B。如果您不想维护两个副本，一个在应用程序中，另一个在组件A库中，则最好利用内容投影（又称Web组件插槽）。

• 请注意，我尚未在生产环境中做到这一点，也没有将其称为稳定架构。