ng-antd-admin 是一个生产就绪的企业级中后台前端解决方案，基于 Angular 21 和 ng-zorro-antd 21 构建。
本项目紧跟 Angular 技术演进，充分利用最新特性，包括 Standalone Components、Zoneless Change Detection、Signals API 和 View Transitions，旨在为开发者提供一个现代化、高性能、易于维护的开发模板。
- ✅ 技术前沿：率先拥抱 Angular 21 全新生态（Signals, Zoneless, Control Flow）。
- ✅ 性能卓越：全链路 OnPush 策略 + 智能路由复用 + 懒加载，体验媲美原生应用。
- ✅ 开箱即用：内置成熟的 RBAC 权限系统、主题切换、多页签管理等核心功能。
- ✅ 代码规范：集成严格的 ESLint + TypeScript + Prettier 配置，保障代码质量。
- ✅ 教学友好：代码注释详尽，不仅是脚手架，更是学习现代 Angular 的最佳实践。
- ✅ 持续维护：承诺跟随 Angular 官方版本长期更新迭代。
| 技术 | 版本 | 说明 |
|---|---|---|
| Angular | 21.0.3 | 核心框架，全面采用 Standalone 架构 |
| TypeScript | 5.9.3 | 开发语言，开启严格模式 |
| ng-zorro-antd | 21.0.0 | 企业级 UI 组件库 (Ant Design) |
| RxJS | 7.8.0 | 响应式编程库 |
| Less | 4.2.0 | CSS 预处理器 |
| NestJS | 10.x | (可选) 后端服务框架 |
告别繁琐的 NgModule，组件依赖更清晰。
@Component({
selector: 'app-example',
standalone: true,
imports: [CommonModule, NzButtonModule],
templateUrl: './example.component.html'
})
export class ExampleComponent {}移除 zone.js 依赖，变更检测性能提升 30% 以上。
// app.config.ts
export const appConfig: ApplicationConfig = {
providers: [
provideZonelessChangeDetection()
]
};使用 Signals 替代部分 RxJS 流，状态管理更直观。
export class ThemeService {
$isNightTheme = signal(false);
$themesOptions = signal<SettingInterface>({ ...defaultOptions });
toggleTheme() {
this.$isNightTheme.update(v => !v);
}
}实现了类似 Vue keep-alive 的路由缓存机制，支持滚动位置记忆。
// 路由配置
data: {
key: 'user-list', // 缓存唯一标识
scrollContain: ['#table'] // 自动恢复滚动条位置
}原生级别的路由过渡动画，丝般顺滑。
provideRouter(routes, withViewTransitions({ skipInitialTransition: true }))- 模块化设计：清晰的目录结构 (
core核心,shared共享,pages页面,widget组件)。 - 依赖注入：全面使用
inject()函数，代码更简洁。 - 极致性能：全局 OnPush 策略 + 自定义预加载策略。
- 🌈 多主题：默认、暗黑、阿里云、紧凑 4 种风格一键切换。
- 🔖 多页签：支持右键菜单、拖拽排序，类浏览器体验。
- 📱 响应式：完美适配 PC、平板、手机等各种屏幕尺寸。
- 🔒 安全增强：内置锁屏功能、细粒度的按钮级权限控制。
提供基于 NestJS + PostgreSQL + Drizzle ORM 的完整后端服务：
- RBAC 模型：用户-角色-菜单-权限的精细化控制。
- JWT 认证：标准的 Token 身份验证流程。
- 完整模块：包含用户管理、部门管理、菜单管理等基础业务接口。
使用 MSW (Mock Service Worker) 模拟数据，无需后端即可体验完整功能。
# 1. 克隆纯前端 Mock 分支
下载 zip包 https://github.com/huajian123/ng-antd-admin/releases/tag/v17.3.0
# 2. 安装依赖
cd ng-antd-admin
npm install
# 3. 启动项目
npm start
# 4. 访问 http://localhost:4201适合需要二次开发完整业务系统的场景。
# 1. 确保已安装 Docker
docker --version
# 2. 进入后端目录
cd nest-api
# 3. 启动 PostgreSQL 容器
docker-compose up -d
# 4. 导入数据库
# 使用 DataGrip/Navicat 等工具连接数据库
# 主机: localhost / 用户名: admin / 密码: 123456
# 数据库: ng-antd-admin-db
# 执行文件: nest-api/ng-antd-admin-db.sql
# 5. 安装依赖并启动
npm install
npm run start# 1. 进入前端目录
cd ui
# 2. 安装依赖
npm install
# 3. 启动开发服务器
npm start
# 4. 浏览器访问 http://localhost:4201仅保留基础架构，适合直接对接已有后端 API。
https://gitee.com/hjxiaoqianduan/ng-ant-admin-pure在路由定义中通过 data 属性控制缓存行为：
const routes: Routes = [
{
path: 'list',
component: ListComponent,
data: {
key: 'list-page', // 必须：唯一标识
shouldDetach: 'no', // 可选：设为 'no' 则强制不缓存
scrollContain: ['#list'] // 可选：缓存滚动条的选择器
}
}
];
// 组件生命周期钩子
export class ListComponent {
_onReuseInit() {
console.log('页面从缓存中恢复');
}
_onReuseDestroy() {
console.log('页面被缓存');
}
}使用 WindowsWidthService 轻松响应屏幕变化：
// 注入服务
private winWidthService = inject(WindowsWidthService);
// 监听断点
this.winWidthService.getWindowWidthStore()
.pipe(takeUntilDestroyed())
.subscribe(width => {
console.log('当前屏幕断点:', width); // xs, sm, md, lg, xl, xxl
});支持在新标签页打开详情，或在同一标签页复用组件。
// 场景A：列表点详情，打开新 Tab,请看在线地址上的演示，菜单为：功能>标签页操作>打开详情页1、打开详情页2、打开详情页3
{
path: 'detail/:id',
component: DetailComponent,
data: { newTab: 'true', title: '详情', key: 'detail' }
}
// 场景B：不同路由复用同一组件（如“添加”和“编辑”）,在当前页签中打开详情,场景请看在线地址上的演示，菜单为：系统管理>角色管理>设置权限
// 只要 title 相同，多页签系统会视为同一组业务
{ path: 'add', component: FormComponent, title: '用户管理' },
{ path: 'edit/:id', component: FormComponent, title: '用户管理' }| ng-antd-admin 版本 | Angular 版本 | 说明 | 下载 |
|---|---|---|---|
| Master (最新) | Angular 21+ | 全新架构，推荐使用 | 源码 |
| v18.x | Angular 18 | 稳定版 | 下载 |
| v17.x | Angular 17 | 引入 Signals | 下载 |
| v15.x | Angular 15 | 传统 NgModule 版本 | 下载 |
⚠️ 注意：Angular 15+ 引入了 Standalone Components，项目结构变化较大。请根据您的团队技术栈选择对应的版本。
我们非常欢迎各种形式的贡献！
- 🐛 提交 Bug：请详细描述复现步骤。
- 💡 功能建议：提出您想要的特性。
- 📝 文档改进：帮助完善文档和注释。
- 🔧 Pull Request：提交您的代码改进。
npm run prettier # 格式化代码
npm run lint # ESLint 检查
npm run lint:fix # 自动修复 Lint 问题
npm run lint:style # 样式检查如果这个项目对你有帮助，请给个 Star ⭐️ 支持一下！
如果你有好的建议，或者想参与项目开发，欢迎加微信：hj345678912，备注 "Angular"，我拉你进交流群一起学习进步！
提供企业级定制开发、远程工作、兼职外包服务。
- 前端：Angular, React, Vue
- 后端：NestJS, Node.js
- 移动端：React Native, Flutter
如果本项目对您有用，正巧您如果也想请我喝一杯咖啡，请扫下面的码，哈哈。在此感谢您
| 微信赞助 | 支付宝赞助 |
|---|---|
本项目基于 MIT License 开源。
Made with ❤️ by huajian123