Osmosys角门户生成器
具备Osmosys编码标准、AI工具和最佳实践的脚手架生产就绪Angular门户项目。
所得
一个完整的Angular 21项目 来吧。 与：
堆栈
- 角度21 --无区域变化检测、信号、独立组件
- PrimeNG v21 --带有Aura主题的UI组件库
- 顺风CSS v4 --实用程序优先的样式与tailwindcss-primui集成
- TypeScript --严格模式，无显式
any - 埃斯林特9 --带Osmosys规则的平面配置（零警告策略）
- 更漂亮 --使用husky预提交钩子实现一致的格式
建筑（烤漆）
- 无区域 —
provideZonelessChangeDetection()，没有Zone.js - OnPush —
ChangeDetectionStrategy.OnPush在所有组件上 - 信号 —
signal(),computed(),input(),output() - 注入（） --无构造函数注入
- 现代控制流程 —
@if,@for,@switch - 单独的模板 —
templateUrl+styleUrl - 核心/功能/共享/布局/页面 文件夹结构
认证层（可选， --auth)
- 使用刷新令牌的JWT登录（基于信号）
- 401重试的身份验证拦截器
- PrimeNG吐司错误拦截器
- 功能路由保护（默认情况下为dev绕过）
- 登录、注册、错误、拒绝访问页面
- 登录页面上的演示凭据
开发运维
- Dockerfile（多级：节点→ nginx）
- docker-compose.yml与端口映射
- nginx.conf用于SPA路由
AI工具
- CLAUDE.md --Claude Code的综合项目说明
- .vcode/mcp.json --MCP服务器（Angular CLI、PrimeNG、Context7）
- Claude代码技能：
- /crud-page --生成CRUD功能页 - /code-quality --lint、格式、构建检查 - /commit --常规提交助手 - /generate-api-types --OpenAPI型再生 - /new-shared-component --脚手架可重复使用的共享组件 - /i18n --国际化设置与翻译工作流程
- 代码审查员子代理 --根据Angular 21模式审查代码
- OpenAPI类型生成 —
npm run generate:api从后端同步类型
设置
git clone https://github.com/OsmosysSoftware/osmosys-portal-generator.git
cd osmosys-portal-generator
npm install用法
交互模式（提示所有选项）
node bin/generate.js非交互模式（所有选项均通过标志）
node bin/generate.js \
--name acme-portal \
--prefix acme \
--description "Acme admin portal" \
--port 4201 \
--api-url http://localhost:4000 \
--no-auth所有选项
| 标志 | 默认值 | 描述 |
|---|---|---|
--name | （必填） | 项目名称（烤肉串案例） |
--display-name | 派生 | 显示名称 |
--prefix | app | 角度组件前缀 |
--description | "Angular portal" | 项目描述 |
--port | 4200 | 开发服务器端口 |
--api-url | http://localhost:3000 | 后端API URL |
--no-auth | auth ON | 跳过身份验证层 |
--output | ./ | 输出目录 |
生成的项目结构
/
├── .claude/skills/ # Claude Code CRUD generator, code-quality, etc.
├── CLAUDE.md # AI instructions
├── CLEANUP.md # Post-generation cleanup guide
├── angular.json # Angular CLI config
├── eslint.config.js # ESLint 9 flat config
├── Dockerfile # Multi-stage build
├── docker-compose.yml # Container config
├── nginx.conf # SPA routing
└── src/app/
├── core/ # Services, guards, interceptors, models
├── features/
│ ├── dashboard/ # Starter dashboard page
│ ├── profile/ # Profile page with change password
│ └── users/ # Users CRUD with p-table (demo data)
├── layout/ # Sakai-ng layout (topbar, sidebar, menu, footer)
├── pages/auth/ # Login, register, error, access
├── pages/notfound/ # 404 page
└── shared/ # Reusable components, directives, pipes生成后
cd
npm start # Dev server
npm run build:prod # Production build
npm run lint # ESLint check
npm run generate:api # Regenerate API types from backend添加功能
使用Claude Code中的CRUD页面技能：
/crud-page users或手动搭建脚手架：
ng generate component features/users/pages/users-list --flat
ng generate service features/users/services/users接线验证
- 在中配置后端身份验证端点
environment.ts - 集
BYPASS_AUTH = false在src/app/core/guards/auth.guard.ts - 更新
core/constants/roles.ts以匹配您的角色系统 - 从中删除演示凭据
pages/auth/login/login.html
构建于
此生成器基于以下内容创建项目 来吧。，PrimeNG提供的免费Angular管理模板。它在底层使用Angular CLI，并将sakaing的布局、组件和样式叠加在生成的项目之上。
- 来吧。 --PrimeNG管理模板（布局、SCSS、组件）
- Angular命令行界面 --基础工程脚手架
- PrimeNG --UI组件
- Tailwind CSS --实用程序优先CSS
- openapi类型脚本 -API类型生成
许可证
麻省理工学院——见 许可证 了解详情。
sakai ng根据 MIT许可证.