如何用NX搭建含NestJS后端、Angular前端及Shared包的全栈Monorepo

不用纠结官方文档里的几种预设类型，直接选择空白Monorepo模板是最适合你的场景的——它没有单一框架的绑定，能自由添加Angular前端、NestJS后端以及自定义共享包，完全满足你的全栈需求。下面是具体步骤：

1. 初始化空白Monorepo #

执行命令创建基础工作区：

npx create-nx-workspace@latest my-fullstack-app --preset=empty --nx-cloud=false

• my-fullstack-app是你的工作区名称，可自定义
• --preset=empty生成无预设的空白结构
• --nx-cloud=false关闭NX云服务（如果需要可以去掉这个参数）

2. 添加Angular前端项目 #

先安装NX的Angular插件，再创建前端应用：

# 安装Angular插件
npm install -D @nx/angular

# 创建Angular应用（可根据需求调整参数）
nx generate @nx/angular:app frontend --style=scss --routing=true

• frontend是前端项目名称，可自定义
• --style=scss指定样式预处理器，可选css、less等
• --routing=true启用路由，按需选择

3. 添加NestJS后端项目 #

同样先安装NestJS插件，再创建后端应用：

# 安装NestJS插件
npm install -D @nx/nest

# 创建NestJS应用
nx generate @nx/nest:app backend --directory=apps/backend

• backend是后端项目名称，可自定义
• --directory指定项目存放路径，默认会放在apps目录下

4. 创建Shared共享包 #

在NX中，共享逻辑推荐用library（库）来管理，执行命令创建shared库：

nx generate @nx/js:library shared --directory=libs/shared --importPath=@my-fullstack-app/shared

• shared是库的名称，可自定义
• --directory=libs/shared将库放在libs目录下（NX约定libs放共享代码，apps放可运行的应用）
• --importPath=@my-fullstack-app/shared设置全局导入别名，后续前后端可以直接用@my-fullstack-app/shared来引用库中的代码，无需写相对路径

创建完成后，你可以在libs/shared/src/lib目录下添加共用代码，比如：

• 前后端通用的TypeScript类型定义（如user.dto.ts）
• 工具函数（如日期格式化、字符串处理）
• 业务相关的常量或枚举

5. 在前后端中使用Shared包 #

在Angular前端的组件或服务中导入：

import { UserDto } from '@my-fullstack-app/shared';

在NestJS后端的控制器或服务中导入：

import { UserDto } from '@my-fullstack-app/shared';

6. 运行与构建项目 #

• 启动Angular前端：

  nx serve frontend
  

• 启动NestJS后端：

  nx serve backend
  

• 构建所有项目（前端、后端、shared库）：

  nx run-many --target=build --projects=frontend,backend,shared
  

• 运行所有测试：

  nx run-many --target=test --projects=frontend,backend,shared
  

实用提示 #

• 执行nx graph可以生成项目依赖关系图，直观查看shared包与前后端的关联
• NX会自动缓存构建、测试结果，重复执行相同命令时速度会大幅提升
• 如果需要在shared包中添加特定工具（如Zod类型验证、Lodash工具库），直接在shared库目录下安装依赖即可

内容的提问来源于stack exchange，提问作者Platus