在多个应用之间重用组件

Question

在工作中，我们将在将来构建多个SPA应用程序以替换旧的SPA应用程序。我们目前正在考虑Angular。现在，我想了解我是否使用了错误的方法，或者是否有可能创建可在我们所有应用程序中重复使用的组件。一个例子：

每个应用程序都会有一个导航栏。我不想在每个导航栏中都重写导航栏，我只想添加一个将从数据库中获取其数据的组件。如果我们要更新导航栏，则只能在一个地方进行，所有应用程序都将从中受益。

我不太确定在这种情况下该采取什么行动，而且我对Angular确实没有足够的知识来知道如何实现这一目标。

Answer 1

如果您指的是具体的不同应用程序，则实际上取决于组件的复杂性。但通常是，我可以建议一个私有的 npm存储库 (you can see several possibilities here) 。创建一个简单的组件，将其导出，然后将其作为依赖项安装在所有应用程序中。因此，一旦您要更改它，就对通用组件进行新发行并为您的应用程序对其进行更新，仅此而已。但是，我返回并坚持您的组件的复杂性，因为它们应该非常通用，健壮并且可以针对每个应用程序进行更改。

Answer 2

Angular的模块化功能支持大型应用程序。您的100多个应用程序中的每个应用程序都可以各自独立地用作模块。角度模块彼此独立运行，每个模块也独立加载。

您还可以在各个模块之间共享组件，从而可以轻松地在所有模块之间进行更新和管理。

Answer 3

您可以使用以下命令使用angular cli创建一个库

ng g library your-lib-name

然后无论您要公开还是公开发布它 最后将其安装在您的任何应用中

以下链接可以为您提供帮助： https://medium.com/@faxemaxee/building-and-publishing-angular-libraries-using-angular-cli-140057d21101

Answer 4

因此，在阅读后，我了解到有两种方法可以满足需要：

1. 创建一个大型Angular应用，并使用模块和延迟加载的功能来管理所有内容。通过拥有一个通用模块，我将能够在模块之间拥有共享的组件，并能够重用这些组件进行身份验证，导航栏，通知等。

2. 创建多个Angular应用。可重用组件应在库中编码并部署在公共或私有npm上的某个位置。然后，当我需要该模块时，将其安装在我的应用程序中。

第一个选项似乎更好，更易于管理，但是当许多人同时在前端应用程序上工作时，需要一些好的管理。在第二个应用程序中，每个应用程序都有其上下文，您不会影响其他任何人的开发。