Nx独立Angular应用中共享库/文件夹的规范创建方法问询

为什么优先选Nx库而非普通文件夹 #

• Nx库自带模块化边界，能清晰划分公共资源与业务代码，避免耦合
• 支持独立构建、测试，方便单独维护共享组件/管道/指令
• 自动生成tsconfig路径映射，导入更简洁（比如@your-project/shared/ui而非相对路径）
• 便于后续扩展，比如将共享库抽离为独立npm包

高效创建共享库的正确方式（无需手动删默认组件） #

你之前手动删除自动生成组件的做法可行，但有更高效的方式：

方式1：创建空库 #

用--empty参数生成不含默认组件的库：

nx generate @nx/angular:library shared-ui --empty

之后按需在库内创建资源：

• 组件：nx generate @nx/angular:component button --project=shared-ui
• 管道：nx generate @nx/angular:pipe truncate --project=shared-ui
• 指令：nx generate @nx/angular:directive tooltip --project=shared-ui

方式2：创建库时跳过默认组件 #

若不需要完全空的库，仅跳过默认组件生成，用--no-component参数：

nx generate @nx/angular:library shared-ui --no-component

共享库的结构建议 #

按功能/类型拆分库，避免单一大库，示例拆分：

• shared/ui：存放通用UI组件（按钮、输入框、弹窗等）
• shared/pipes：存放通用管道（日期格式化、文本截断等）
• shared/directives：存放通用指令（tooltip、权限控制等）
• shared/utils：存放工具函数、常量等

每个库内部按类型组织文件，比如shared/ui的结构：

libs/shared/ui/
├── src/
│   ├── lib/
│   │   ├── button/
│   │   │   ├── button.component.ts
│   │   │   ├── button.component.html
│   │   │   └── button.component.scss
│   │   ├── input/
│   │   └── index.ts  # 导出所有UI组件，简化外部导入
│   └── index.ts  # 库的入口，统一导出lib资源
└── project.json

共享库的使用姿势 #

在应用或其他库中导入时，直接用Nx生成的路径别名：

// 在应用组件中导入共享按钮组件
import { ButtonComponent } from '@your-project/shared/ui';

无需冗长相对路径，Nx会自动处理依赖，确保构建只打包用到的资源。

关于直接导入组件的补充 #

项目初期、复用范围极小的组件，直接导入没问题，但随着项目规模扩大，共享库的优势会凸显：代码更整洁、维护成本更低、复用性更强。

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