我开始接触 Angular 6 位，并且对 Angular Elements 以及新的库项目非常感兴趣。我即将开展一个项目，可能需要这两个新功能。
我需要创建可跨 Web 框架重用的自定义 UI 组件，但我也希望获得在 Angular 项目中使用它们的一流支持。我已经关注了这个tutorial https://medium.com/@tomsu/building-web-components-with-angular-elements-746cd2a38d5b并有一个 angular6 应用程序来注册自定义元素，并将 webpack 捆绑包连接到单个文件中。然后我可以在纯 html 页面中使用该单个 js 文件，一切都运行良好。
关键点是在库项目中创建这些自定义元素会很棒。这样我就可以在我们的内部 npm 注册表上分发我的库，以及构建包含所有自定义元素的 js 并将其部署在 CDN 上。
是否可以在新的库项目中构建 Angular Elements？
介绍
我将在这里描述的是一种方法单一回购协议包含一个主 Angular 应用程序（主机）和一个或多个角元素基于应用程序（儿童）。您将能够通过将所有元素捆绑在一起来使用主应用程序中的元素，或者您可以使用 npm 打包元素并将其作为 npm 依赖项导入。这在很大程度上基于曼弗雷德·斯泰尔 (Manfred Steyer) 在他的著作中所描述的内容。Angular Elements 博客系列 https://www.softwarearchitekt.at/post/2018/07/13/angular-elements-part-i-a-dynamic-dashboard-in-four-steps-with-web-components.aspx所以我建议你阅读这篇文章以了解一些背景信息并填补一些缺失的部分。
但请注意，目前我在此描述的方法无法避免多个应用程序之间的重复依赖关系。
Solution
在现有的 Angular 项目中，您可以使用以下命令创建子应用程序ng generate application <name>. See 文档 https://angular.io/cli/generate#application-command更多细节。
将您新创建的项目转变为角元素 https://angular.io/guide/elements.
为了帮助您构建项目，请查看 Angular CLI 扩展ngx-build-plus here https://github.com/manfredsteyer/ngx-build-plus。就我而言，我没有应用中描述的大部分食谱ngx-build-plus文档，因为它是关于跨项目共享依赖项的，我不会在这里详细说明。我所需要的就是下面的内容。
构建这个架构的步骤大致是：
ng add ngx-build-plusng add ngx-build-plus --project <name>- create npm scripts:
- 对于元素项目：
"build:client-a": "ng build --prod --project client-a --single-bundle true --output-hashing none --vendor-chunk false"
- 对于主机应用程序，常规构建命令如
ng build, ng serve
- 将生成的 elements JS 文件的路径添加到主机应用程序构建配置中 - 将其添加到脚本属性中
angular.json
- 将自定义元素 polyfill JS 文件的路径添加到元素应用程序构建配置中 - 将其添加到 script 属性中
angular.json。每个应用程序都有自己的配置和脚本条目。
构建 elements 项目后，其单个文件包通常会转到./dist/<project-name>/。您可以创建一个npm 包从该内容中提取并将其用作库。
Notes
将子应用程序与主机应用程序捆绑在一起的两种方法。在主机应用程序脚本配置中，您可以将子应用程序的路径添加到dist/文件夹或添加子应用程序的路径node-modules/文件夹（当子应用程序作为 npm 包导入时）。
创建一个角度library而不是 Angular应用以此目的不管用因为 CLI 生成的 Angular 库不能在 Angular 项目之外使用 - 这在文档中不是很清楚。
确保该组件不依赖于父应用程序你应该没问题。我通过将依赖项转换为组件输入或通过执行以下操作来处理依赖项内容投影.
当你有一个A组份其中包括一个B组份。你想转A组份成一个有角度的元素但是B组份在您的应用程序的多个部分中使用。如果您不想保留两份副本，一份在申请表中，另一份在您的A组份图书馆，这可能是一个很好的例子利用内容投影 https://www.softwarearchitekt.at/post/2018/10/31/content-projection-with-slots-in-angular-elements-7.aspx (aka Web 组件插槽 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot).
请注意，我还没有在生产中这样做，它不是您所谓的稳定架构。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
