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

Posted 2023-02-19

【中文标题】如何在多个 Angular 2 项目之间共享一个 Angular 2 组件？

【英文标题】：How can I share an Angular 2 component between multiple Angular 2 projects?

【发布时间】：2016-05-07 14:40:12

【问题描述】：

理想情况下，我想创建一个独立的 Angular 2 组件（带有测试），然后在两个或三个不同的 Angular 2 站点之间重新使用它。实现这一目标的好方法是什么？ 还有一个额外的问题 - 是否存在任何第 3 方 Angular 2 组件？

【问题讨论】：

使用新版本的 angular（版本 6 / 7），您将能够直接使用 CLI 在项目中生成 angular 库。这应该让您完全不必担心 NPM 发布。有关如何执行此操作的更多详细信息，请查看这篇 Medium 文章：medium.com/@tomsu/…

【参考方案1】：

更新

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

您可以创建一个 angular2 组件库（带有测试），然后在任意数量的项目中使用它

然后你可以将它发布到 npm 上供公众使用。如果你想保密，你可以阅读这个https://docs.npmjs.com/creating-and-publishing-private-packages

是的，存在许多第 3 方 angular2 组件。这里有一些来自 valor-software https://github.com/valor-software/ng2-plans

---

如果您不想发布您的库并仍然使用它，您可以创建一个单存储库架构。前谷歌员工有一个名为nxhttps://nx.dev/的工具。您可以使用它创建一个库，并可以在您的项目中使用它https://nx.dev/latest/angular/tutorial/08-create-libs

---

用于 Angular 库的 Yeoman 生成器 https://github.com/jvandemo/generator-angular2-library

【讨论】：

第一个链接失效

已更新，但检查 yeoman 生成器，它有更好的文档

npmjs 链接失效。第二个链接密码保护。这个答案没有多少用处。

【参考方案2】：

这有点晚了，但我想提出另一个解决方案，最近发布到public beta for Angular。您可以将每个组件包装在一个 ngModule 中（正如大多数 ng 组件库所做的那样），然后使用 bit 在两个不同的项目或应用程序之间共享该组件。优点是您可以发布、安装和更新单个组件。 bit 将处理组件及其所有依赖项、文件等的打包，因此您可以使用 npm/yarn 将其安装到另一个项目中。此外，您可以使用 bit 将组件的代码导入第二个 repo，进行更改并在 repo 之间同步它们。你可以看一下Angular with bit tutorial 和guidelines（由团队位和角度共同编写）。这里还有一些examples。希望这可以帮助。我在团队中，所以请随时提出任何问题，如果可以的话，我很乐意提供帮助。

【讨论】：

有什么方法可以使用 Bit 创建一个私有仓库吗？

@SenthilkumarRamasamy Bit 让您拥有 2 个私有仓库和每个仓库的无限组件（因此基本上是无限组件；）。也就是说，它可能无法按照您对具有不同角度版本的项目的期望方式工作。