将多个现有 Angular 项目添加到 NX 工作区/monorepo 中

Question

我们是一家 Angular 商店，正在考虑使用 NX 来管理 monorepo。我看过许多有关将现有 Angular CLI 工作区转换为 NX 工作区的指南和文章。

因此，我们的方法是将最复杂的项目转换为 NX 工作区。下一步是将我们的其他 Angular 项目添加到这个新工作区。

我该怎么做呢？我是否必须基本上使用 NX cli 创建一个空白应用程序，然后将所有代码复制到该空白应用程序中？那么我们必须 npm 安装这个新项目需要的所有软件包吗？

Answer 1

实际上，我会从一个简单的项目开始，并尝试找到一些您想要在组织中使用的最佳实践。与 Angular 本身一样，Nx Workspace 也有固执己见，但仅限于一定程度。您仍然有责任决定如何将代码分成逻辑单元。

apps需要记住的一件主要事情是 Nx 使用和的思想libs。理想情况下， anapp非常小，并且大多数（如果不是全部）实际功能都位于libs. 在 Angular 中，这通常意味着您延迟加载位于库中的组件。

关于如何构建库，有不同的方法。您可以阅读这篇博文来获得一些想法。

另外，请记住，使用单一存储库并不意味着您必须将所有公司代码都放在该单个存储库中。例如，我处理许多不同的客户项目，为每个客户项目拥有一个 Nx 工作区更有意义。然后，如果我需要在项目之间共享代码，我请确保将其发布到 npm 并将其视为第三方库。

我该怎么做呢？我是否必须基本上使用 NX cli 创建一个空白应用程序，然后将所有代码复制到该空白应用程序中？那么我们必须 npm 安装这个新项目需要的所有软件包吗？

是的，我个人会从一张白纸开始。

您可以通过使用预设创建 Nx 工作区来完成此操作empty，并确保选择 Angular CLI：

$ yarn create nx-workspace <project-name> 

接下来，进入您的目录并添加 Nrwl Angular 包：

$ cd <project-name>
$ yarn add -D @nrwl/angular

从那一刻起，您可以像这样生成应用程序和库：

ng g @nrwl/angular:app <app-name>
ng g @nrwl/angular:lib <lib-name>

现在，您可以开始将代码从以前的项目移动到该lib文件夹​​中，并从您的app. 如果 Angular 中已经有一个运行良好的现有模块结构，则只需为每个模块创建一个库即可。

我希望这有帮助。