简体繁体 English

如何在多个 Angular 2 项目之间共享 Angular 2 组件？

[英]How can I share an Angular 2 component between multiple Angular 2 projects?

原文 2016-01-29 18:38:54 0 2 javascript/ angular/ web-component

Ideally, I'd like to create a stand-alone Angular 2 component (with tests) and then re-use it between two or three different Angular 2 sites.理想情况下，我想创建一个独立的 Angular 2 组件（带有测试），然后在两个或三个不同的 Angular 2 站点之间重新使用它。 What are the good ways to achieve this?实现这一目标的好方法是什么？ And a bonus question - do any 3rd party Angular 2 components exist?还有一个额外的问题 - 是否存在任何 3rd 方 Angular 2 组件？

2 个解决方案

UPDATE更新

OFFICIAL Angular CLI https://angular.io/guide/creating-libraries官方 Angular CLI https://angular.io/guide/creating-libraries

You can create an angular2 component library (with tests) and then use it in any number of projects您可以创建一个 angular2 组件库（带有测试），然后在任意数量的项目中使用它

Then you can publish it on npm for public use.然后你可以将它发布到 npm 上供公众使用。 If you want to keep it private, you can read thishttps://docs.npmjs.com/creating-and-publishing-private-packages如果你想保密，你可以阅读这个https://docs.npmjs.com/creating-and-publishing-private-packages

Yes, many 3rd party angular2 components exist.是的，存在许多 3rd 方 angular2 组件。 Here are a few from valor-software https://github.com/valor-software/ng2-plans这里有一些来自 valor-software https://github.com/valor-software/ng2-plans

If you don't want to publish your library and still use it, you can create a mono repo architecture.如果您不想发布您的库并仍然使用它，您可以创建一个单声道存储库架构。 There is a tool by ex-googlers called nx https://nx.dev/ .前谷歌员工有一个名为nx https://nx.dev/的工具。 You can create a library using it and can use it in your project https://nx.dev/latest/angular/tutorial/08-create-libs您可以使用它创建一个库，并可以在您的项目中使用它https://nx.dev/latest/angular/tutorial/08-create-libs

Yeoman Generator for angular library https://github.com/jvandemo/generator-angular2-library用于角度库的 Yeoman 生成器https://github.com/jvandemo/generator-angular2-library

this is a bit late but I'd like to suggest another solution, recently released to public beta for Angular .这有点晚了，但我想建议另一种解决方案，最近发布到Angular 的公共测试版。 You can wrap each component inside an ngModule (as done by most ng component libs) and then use bit to share the component between two different projects or apps.您可以将每个组件包装在一个 ngModule 中（就像大多数 ng 组件库所做的那样），然后使用bit在两个不同的项目或应用程序之间共享该组件。 The advantages are that you can publish, install and update individual components.优点是您可以发布、安装和更新单个组件。 bit will handle the packing of the component with all its dependencies, files etc so you can then install it another project using npm/yarn. bit 将处理组件及其所有依赖项、文件等的打包，因此您可以使用 npm/yarn 将其安装到另一个项目。 Also, you can then use bit to import the component's code into the 2nd repo, make changes and sync them back between the repos.此外，您还可以使用 bit 将组件的代码导入到第二个存储库中，进行更改并将它们同步回存储库之间。 You can take a look at the Angular with bit tutorial and guidelines (written together by teams bit and angular).您可以查看Angular with bit 教程和指南（由团队 bit 和 angular 共同编写）。 Here are also some examples .这里还有一些例子。 Hope this helps.希望这可以帮助。 I'm on team bit so please feel free to ask anything and I'd love to help if I can.我是团队成员，所以请随时提出任何问题，如果可以，我很乐意提供帮助。

I know this is maybe to late, but it can help you. 我知道这可能要迟到，但它可以帮到你。
I start using Angular and I have the same question, so I tried bit.dev , and it was very cool. 我开始使用Angular并且我有同样的问题，所以我尝试了bit.dev ，这非常酷。
Finally, I created my first library and share all the components to bit.dev collection. 最后，我创建了我的第一个库并将所有组件共享到bit.dev集合。
Check out https://bit.dev/joshk/ng-spinners 查看https://bit.dev/joshk/ng-spinners