AI导哈

Angular门户生成器

基于Osmosys编码标准和AI工具，快速生成符合生产标准的Angular门户项目，内置最佳实践和现代技术栈。

  • by OsmosysSoftware
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 OsmosysSoftware/osmosys-portal-generator

使用说明

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 ./<name> 输出目录

生成的项目结构

<project-name>/
├── .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 <project-name>
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

接线验证

  1. 在中配置后端身份验证端点 environment.ts
  2. 集 BYPASS_AUTH = false 在 src/app/core/guards/auth.guard.ts
  3. 更新 core/constants/roles.ts 以匹配您的角色系统
  4. 从中删除演示凭据 pages/auth/login/login.html

构建于

此生成器基于以下内容创建项目 来吧。，PrimeNG提供的免费Angular管理模板。它在底层使用Angular CLI，并将sakaing的布局、组件和样式叠加在生成的项目之上。

许可证

麻省理工学院——见 许可证 了解详情。

sakai ng根据 MIT许可证.

相关 MCP