初识 Nx

Nx 是一套功能强大、可扩展的开发工具，可帮助我们开发、测试、构建和扩展 Angular 应用程序，并完全集成支持 Jest、Cypress、ESLint、NgRx 等现代库。

一、安装 CLI

1.使用npm：

npm install -g nx

2.使用yarn：

yarn global add nx

二、创建应用

npx create-nx-workspace@latest

回车后将进行一波安装过程，然后自定义配置。

安装完成得到如下目录结构：

Nx 使代码轻松拆分为单独的项目，项目有两种类型：应用程序和库。

/apps/ 包含应用程序项目，这些是可运行应用程序的主要入口点。

/libs/ 包含库项目，有许多不同类型的库，每个库定义自己的外部 api，以便库之间的边界保持清晰。

/tools/ 包含对代码库执行操作的脚本，比如数据库脚本、自定义执行器（或生成器）或工作区生成器。

/workspace.json 定义工作区中的每个项目以及可以在这些项目上运行的执行器。

/nx.json 添加有关项目的额外信息，包括手动定义的依赖项和可用于限制项目相互依赖的方式的标记。

/tsconfig.json 设置全局类型脚本设置，并为每个库创建别名，以帮助创建类型脚本导入。

三、运行应用

npx nx serve firstapp

浏览器打开 localhost:4200，我们的第一个 Nx 应用运行起来了！

四、添加后台服务

1.首先安装 NestJS 和 NodeJS 插件：

npm install --save-dev @nrwl/nest @nrwl/node

2.创建一个 NestJS 应用：

npx nx g @nrwl/nest:app api --frontendProject=firstapp

安装完成我们会发现 apps 文件夹下面多了一个 api 文件夹，这个就是我们的后台应用。

以及 firstapp 文件夹里多了一个 proxy.config.json 文件，用来配置后台服务：

五、创建 libs 公共库

应用程序是端到端的工作！但是，存在一些问题，后端和前端都定义了接口，接口现在同步，但在实际应用程序中，随着时间的推移，它会出现分歧。因此，运行时错误会逐渐进入。应在后端和前端之间共享此接口。在 Nx 中，可以通过创建库来做到这一点。

运行以下命令以生成库：

npx nx g @nrwl/workspace:lib data

它为我们生成了以下内容，而且在 angular.json 文件中已经自动写入了相关配置：