我可以在单个 js 文件中使用 angular 库来发出 Angular 元素吗？
Can I have angular library that emits Angular elements in single js file?
我开始接触 angular 6 位，并且对 Angular Elements 以及新的库项目非常感兴趣。我有一个即将进行的项目，可能需要这两个新功能。
我需要创建可跨 Web 框架重用的自定义 UI 组件，但我也希望首先 class 支持在 angular 项目中使用它们.我遵循了这个 tutorial 并且有一个 angular6 应用程序可以注册自定义元素，并将 webpack 包连接到一个文件中。然后，我可以在普通 html 页面中使用该单个 js 文件，并且一切正常。
关键是在库项目中创建这些自定义元素会很棒。这样我就可以在我们的内部 npm 注册表上分发我的库，以及构建包含所有自定义元素的 js 并将其部署在 CDN 上。
是否可以在新库项目中构建 Angular 元素？
简介
我将在这里描述的是一种方法，让 mono-repo 包含一个主要的 Angular 应用程序（主机）和一个或多个 Angular 基于元素 的应用程序（子）。您可以通过将所有元素捆绑在一起来在主应用程序中使用这些元素，或者您可以使用 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 文档中描述的大部分方法，因为它是关于跨项目共享依赖项的，我不会在这里详细说明。我只需要以下内容。
搭建这个架构的步骤大致是：
ng add ngx-build-plusng 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 文件的路径添加到主机应用程序构建配置中 - 您将其添加到脚本 属性 in
angular.json
- 将自定义元素 polyfill JS 文件的路径添加到元素应用程序构建配置中 - 您将其添加到
angular.json 中的脚本 属性 中。每个应用程序都有自己的配置和脚本条目。
构建元素项目后，其单个文件包通常会转到 ./dist/<project-name>/。您可以从该内容创建一个 npm 包 并将其用作库。
备注
将子应用程序与主机应用程序捆绑在一起的两种方法。在主机应用程序脚本配置中，您可以在 dist/ 文件夹中添加子应用程序的路径，或者在 node-modules/ 文件夹中添加子应用程序的路径（当子应用程序作为 npm 包导入时） .
为此目的创建 Angular 库 而不是 Angular 应用程序 不会工作 因为 Angular 由 CLI 生成的库不能在 Angular 项目之外使用——这在文档中不是很清楚。
确保组件不依赖于父应用程序，您应该没问题。我通过将依赖项转换为组件输入或通过执行 content projection.
当您有一个 组件 A，其中包含一个 组件 B。您想要将 component A 转换为 angular 元素，但是 component B 在您的应用程序的多个部分中使用。如果您不想维护两个副本，一个在应用程序中，另一个在您的 组件 A 库中，take advantage of content projection (aka Web Component slots 可能是一个很好的例子。
请注意，我没有在生产环境中这样做过，这不是您所谓的稳定架构。
我开始接触 angular 6 位，并且对 Angular Elements 以及新的库项目非常感兴趣。我有一个即将进行的项目，可能需要这两个新功能。
我需要创建可跨 Web 框架重用的自定义 UI 组件，但我也希望首先 class 支持在 angular 项目中使用它们.我遵循了这个 tutorial 并且有一个 angular6 应用程序可以注册自定义元素，并将 webpack 包连接到一个文件中。然后，我可以在普通 html 页面中使用该单个 js 文件，并且一切正常。
关键是在库项目中创建这些自定义元素会很棒。这样我就可以在我们的内部 npm 注册表上分发我的库，以及构建包含所有自定义元素的 js 并将其部署在 CDN 上。
是否可以在新库项目中构建 Angular 元素？
简介
我将在这里描述的是一种方法，让 mono-repo 包含一个主要的 Angular 应用程序（主机）和一个或多个 Angular 基于元素 的应用程序（子）。您可以通过将所有元素捆绑在一起来在主应用程序中使用这些元素，或者您可以使用 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 文档中描述的大部分方法，因为它是关于跨项目共享依赖项的，我不会在这里详细说明。我只需要以下内容。
搭建这个架构的步骤大致是：
ng add ngx-build-plusng 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 文件的路径添加到主机应用程序构建配置中 - 您将其添加到脚本 属性 in
angular.json - 将自定义元素 polyfill JS 文件的路径添加到元素应用程序构建配置中 - 您将其添加到
angular.json中的脚本 属性 中。每个应用程序都有自己的配置和脚本条目。
构建元素项目后，其单个文件包通常会转到 ./dist/<project-name>/。您可以从该内容创建一个 npm 包 并将其用作库。
备注
将子应用程序与主机应用程序捆绑在一起的两种方法。在主机应用程序脚本配置中，您可以在
dist/文件夹中添加子应用程序的路径，或者在node-modules/文件夹中添加子应用程序的路径（当子应用程序作为 npm 包导入时） .为此目的创建 Angular 库 而不是 Angular 应用程序 不会工作 因为 Angular 由 CLI 生成的库不能在 Angular 项目之外使用——这在文档中不是很清楚。
确保组件不依赖于父应用程序，您应该没问题。我通过将依赖项转换为组件输入或通过执行 content projection.
来处理依赖项
当您有一个 组件 A，其中包含一个 组件 B。您想要将 component A 转换为 angular 元素，但是 component B 在您的应用程序的多个部分中使用。如果您不想维护两个副本，一个在应用程序中，另一个在您的 组件 A 库中，take advantage of content projection (aka Web Component slots 可能是一个很好的例子。
请注意，我没有在生产环境中这样做过，这不是您所谓的稳定架构。