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

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

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

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

标签： angularnrwl-nx

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

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

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

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

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

是的，我个人会从一个完整的白板开始。

您可以通过使用预设创建 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 中已经有一个运行良好的现有模块结构，您可以简单地为每个模块创建一个库。

我希望这有帮助。