我可以在单个js文件中使用能发出Angular元素的角度库吗？ [英] Can I have angular library that emits Angular elements in single js file?

问题描述

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

I'm starting to get into the angular 6 bits, and am very interested in Angular Elements as well as the new library projects. I have an upcoming project that will probably need both these new features.

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

I have the need to create custom UI components that are reusable across web frameworks, but I'd also like to have first class support for using them in angular projects. I've followed this tutorial and have an angular6 app that registers custom elements, and concats the webpack bundles in a single file. I can then use that single js file in a plain html page and everything works very well.

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

The sticking point is it would be great to create these custom elements in a library project. That way I can distribute my library on our internal npm registry, as well as build the js that contains all the custom elements and deploy it on a CDN.

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

Is it possible to build Angular Elements in the new library projects?

推荐答案

简介

在这里我将描述一种使 mono-repo 包含主Angular应用程序（主机）和一个或多个 Angular Elements 的方法。基于应用程序（儿童）。您可以通过将所有元素捆绑在一起来使用主应用程序中的元素，也可以将元素与npm打包在一起并将其作为npm依赖项导入。这很大程度上是基于Manfred Steyer在其 Angular Elements博客系列，所以我建议您阅读该文章以获取相关信息并填补一些遗漏的内容。

What I will describe here is a way to have a mono-repo containing a main Angular app (host) and one or more Angular Elements based apps (childs). You will be able to use the elements in your main app by bundling all them together or you can pack your element with npm and import it as a npm dependency. This is heavily based on what is described by Manfred Steyer in his Angular Elements blog series so I advice you to read that to get some context and fill some missing pieces.

不过请注意，目前我在此描述的方法无法避免多个应用程序之间重复的依赖关系。

Be aware though, that currently the approach I describe here will not avoid duplicated dependencies across your multiple apps.

解决方案

在现有的Angular项目中，您可以使用 ng生成应用程序< name> 创建子应用程序。有关更多详细信息，请参见文档。

In your existing Angular project you can create a child application with ng generate application <name>. See documentation for more details.

将您新创建的项目转换为角度元素。

Turn your newly created project to an Angular Element.

为帮助您构建项目，请查看Angular CLI扩展 ngx-build-plus 此处。就我而言，我没有采用 ngx-build-plus 文档中描述的大多数方法，因为它是关于在项目之间共享依赖关系的，这里不再赘述。我所需要的只是以下内容。

To help you build your projects take a look at the Angular CLI extension ngx-build-plus here. For my case I didn't apply most of the recipe described in the ngx-build-plus docs as it is about sharing dependencies across projects which I will not detail here. All I needed was what follows.

构建此体系结构的步骤大致为：

The steps to build this architecture are roughly:

• ng添加ngx-build-plus


• ng添加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构建， ng服务
  
  
  • ng add ngx-build-plus
  • ng add ngx-build-plus --project <name>
  • create npm scripts:
    • for elements projects: "build:client-a": "ng build --prod --project client-a --single-bundle true --output-hashing none --vendor-chunk false"
    • for host app, regular build commands like ng build, ng serve

    构建元素项目后，其单个文件包通常会位于 ./ dist /<项目名称> / 。您可以根据该内容创建一个 npm包，并将其用作库。

    After you build your elements project, its single file bundle will typically go to ./dist/<project-name>/. You can create an npm package from that content and use it as a library.

    注释

    
    

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

    • Two ways to bundle the child apps with the host app. In the host app scripts configuration, you either add the path to the child apps in the dist/ folder or you add the path to the child apps in node-modules/ folder (when child apps are imported as npm packages).

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

    Creating an Angular library instead of an Angular application for this purpose will not work because Angular libraries generated by the CLI cannot be used outside an Angular project - this was not very clear in the documentation.

    请确保组件不依赖于父应用，并且应该没事。我通过将依赖项转换为组件输入或进行内容投影。

    Make sure that the component doesn't have dependencies to the parent app and you should be fine. I handled dependencies by converting them to component inputs or by doing content projection.

    当您拥有组件A ，其中包含 B组件。您想将组件A 转换为角度元素，但是组件B 在应用程序的多个部分中都使用了。如果您不想维护两个副本，一个维护在应用程序中，另一个维护在 A组件库中，那么利用内容投影（又名 Web组件插槽）。

    When you have a component A which includes a component B. You want to turn component A into an angular element but component B is used in several parts of your application. If you don't want to maintain two copies, one in the application and other in your component A library, it might be a good case to take advantage of content projection (aka Web Component slots).

    请注意，我尚未在生产环境中进行此操作，这不是您所说的稳定架构。

    Be aware that I haven't done this in production and its not what you would call a stable architecture.

    这篇关于我可以在单个js文件中使用能发出Angular元素的角度库吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！