typescript - 两个不同 Angular 应用的 Monorepo 模式？

直到现在，我们只有一个 Angular 8 应用程序。但现在我们必须创建一个新的管理应用程序，其用户界面将类似于现有应用程序（类似的登录组件、侧边栏、导航栏等）。由于这两个应用程序将部署在两个不同的服务器上，但相互共享组件，我们决定在一个仓库中保留两个不同的源码，并使用一个共享组件库。

我们现有的应用程序是使用 Jhipster 生成的。

我发现以下两种方法可能对维护两个不同的应用程序有用。

我阅读了《为 Angular 创建库》的文章。然而，我找不到关于如何更改现有构建流程以构建两个不同应用程序的资料。我阅读的所有文章都有使用 Angular CLI 命令来构建不同的应用程序。由于我们已经使用 webpack 作为打包工具，我该如何配置它以构建我的两个应用程序？基本上，我所有的疑问都是关于如何扩展我们当前用于构建、测试和维护这两个不同应用程序的工具。

然后我读到了关于 monorepo 模式的内容，并且偶然发现了 nrwl.io 的 Nx。根据我的理解，它是构建在 Angular CLI 之上的一个封装，用于支持 monorepo 模式，并且配备了我维护两个应用程序所需的所有工具。

所以我的问题是，当你只需要在两个应用之间共享代码时，采用 monorepo 模式是否值得？这是从开发便利性与将现有应用转换为支持 monorepo 模式所需时间（例如设置像 Nx 中那样的工具，据我所知这有点麻烦）之间的考量。

答案＃1

声明，我是NX的超级粉丝。

你如何改变现有的构建流程来构建两个不同的应用程序？

不确定我是否能够验证以下说法，但过去，我相信 Angular 文档是围绕单个应用程序来表述的。最近（v7 或 v8），文档用词已更新为以工作区为中心。可能是由于 NX 越来越受欢迎（他们自 Angular 6 之前就一直在开创 Angular 单体仓库开发）？

开箱即用的 Angular CLI

由于你使用的是 Angular 8，你可以像使用 Angular CLI 生成组件一样生成应用程序：ng generate application admin-app。此外，ng build 接受应用程序名称作为参数，所以这些就是你使用 Angular CLI 即可构建两个独立应用程序所需的一切。ng build public-app 和 ng build admin-app

然而，如果你在一个已有的应用程序中（也就是使用 ng new 生成的应用）这样做，代码库可能会变得非常混乱，因为新应用会被放置在代码库内部的 projects 目录中。你基本上会得到 App-Ception，我认为这是一个非常糟糕的主意。

关于设置多项目工作区，有官方指导。你基本上创建一个空的工作区，所有生成的应用都会放在 projects 目录下。

当你只需要在两个应用程序之间共享代码时，使用 monorepo 模式值得吗？

这是主观的，两种方法（单仓库与多仓库/微仓库）都有优缺点，但在我看来答案绝对是肯定的。不过我必须诚实地说，如果没有 NX，我甚至不会尝试。

NX

NX 带来了很多优势。说它只是 Angular CLI 的一个包装器实际上只是触及了表面。它确实有一系列的 schematics，用于扩展/改进现有的 Angular CLI schematics（ng generate app|component|lib 等就是 schematic）。它还使得开箱即用地集成更好的工具变得很容易（Jest 优于 Karma；Cypress 优于 Protractor）。它还有自己的 CLI 工具，解决了 monorepo 结构带来的许多问题（可以看看他们的指南）。

尝试将其融入到你现有的代码库中

根据他们的入门文档，你只需执行以下操作即可轻松尝试：

ng add @nrwl/workspace