Angular Architect

作者 jeffallan1be15d8064f8MIT11K 个星标收录于 2026年10月8日更新于 2026年10月8日仓库5天前更新

Generates Angular 17+ standalone components, configures advanced routing with lazy loading and guards, implements NgRx state management, applies RxJS patterns, and optimizes bundle performance. Use when building Angular 17+ applications with standalone components or signals, setting up NgRx stores, establishing RxJS reactive patterns, performance tuning, or writing Angular tests for enterprise apps.

仅含说明Software Development

AI 生成的概览

指导 Angular 17+ 开发，涵盖独立组件、signals、NgRx、RxJS、路由与测试。

功能: 提供构建 Angular 17+ 应用的架构指导与代码模式，涵盖带 signals 的独立组件、OnPush 变更检测、NgRx store/effects/selectors、RxJS 订阅管理、带守卫的懒加载路由以及打包体积优化。它还规定使用 TestBed 编写单元与集成测试并设定覆盖率阈值。组件、RxJS、NgRx、路由和测试的参考文档可按需加载。
适用场景: 适用于构建或扩展 Angular 17+ 应用，尤其是使用独立组件或 signals 的场景。也适合搭建 NgRx 状态、建立 RxJS 模式、优化 Angular 性能，或为企业应用编写 Angular 测试。
运行要求: 无脚本，仅包含指令与参考文档。需要 Angular 17+ 项目、TypeScript 工具链、用于生产构建的 Angular CLI，可选使用 NgRx 与 Redux DevTools。

Angular Architect

Senior Angular architect specializing in Angular 17+ with standalone components, signals, and enterprise-grade application development.

Core Workflow

Analyze requirements - Identify components, state needs, routing architecture
Design architecture - Plan standalone components, signal usage, state flow
Implement features - Build components with OnPush strategy and reactive patterns
Manage state - Setup NgRx store, effects, selectors as needed; verify store hydration and action flow with Redux DevTools before proceeding
Optimize - Apply performance best practices and bundle optimization; run ng build --configuration production to verify bundle size and flag regressions
Test - Write unit and integration tests with TestBed; verify >85% coverage threshold is met

Reference Guide

Load detailed guidance based on context:

Topic	Reference	Load When
Components	`references/components.md`	Standalone components, signals, input/output
RxJS	`references/rxjs.md`	Observables, operators, subjects, error handling
NgRx	`references/ngrx.md`	Store, effects, selectors, entity adapter
Routing	`references/routing.md`	Router config, guards, lazy loading, resolvers
Testing	`references/testing.md`	TestBed, component tests, service tests

Key Patterns

Standalone Component with OnPush and Signals

typescript

import { ChangeDetectionStrategy, Component, computed, input, output, signal } from '@angular/core';import { CommonModule } from '@angular/common';
@Component({  selector: 'app-user-card',  standalone: true,  imports: [CommonModule],  changeDetection: ChangeDetectionStrategy.OnPush,  template: `    <div class="user-card">      <h2>{{ fullName() }}</h2>      <button (click)="onSelect()">Select</button>    </div>  `,})export class UserCardComponent {  firstName = input.required<string>();  lastName = input.required<string>();  selected = output<string>();
  fullName = computed(() => `${this.firstName()} ${this.lastName()}`);
  onSelect(): void {    this.selected.emit(this.fullName());  }}

RxJS Subscription Management with `takeUntilDestroyed`

typescript

import { Component, OnInit, inject } from '@angular/core';import { takeUntilDestroyed } from '@angular/core/rxjs-interop';import { UserService } from './user.service';
@Component({ selector: 'app-users', standalone: true, template: `...` })export class UsersComponent implements OnInit {  private userService = inject(UserService);  // DestroyRef is captured at construction time for use in ngOnInit  private destroyRef = inject(DestroyRef);
  ngOnInit(): void {    this.userService.getUsers()      .pipe(takeUntilDestroyed(this.destroyRef))      .subscribe({        next: (users) => { /* handle */ },        error: (err) => console.error('Failed to load users', err),      });  }}

NgRx Action / Reducer / Selector

typescript

// actionsexport const loadUsers = createAction('[Users] Load Users');export const loadUsersSuccess = createAction('[Users] Load Users Success', props<{ users: User[] }>());export const loadUsersFailure = createAction('[Users] Load Users Failure', props<{ error: string }>());
// reducerexport interface UsersState { users: User[]; loading: boolean; error: string | null; }const initialState: UsersState = { users: [], loading: false, error: null };
export const usersReducer = createReducer(  initialState,  on(loadUsers, (state) => ({ ...state, loading: true, error: null })),  on(loadUsersSuccess, (state, { users }) => ({ ...state, users, loading: false })),  on(loadUsersFailure, (state, { error }) => ({ ...state, error, loading: false })),);
// selectorsexport const selectUsersState = createFeatureSelector<UsersState>('users');export const selectAllUsers = createSelector(selectUsersState, (s) => s.users);export const selectUsersLoading = createSelector(selectUsersState, (s) => s.loading);

Constraints

MUST DO

Use standalone components (Angular 17+ default)
Use signals for reactive state where appropriate
Use OnPush change detection strategy
Use strict TypeScript configuration
Implement proper error handling in RxJS streams
Use trackBy functions in *ngFor loops
Write tests with >85% coverage
Follow Angular style guide

MUST NOT DO

Use NgModule-based components (except when required for compatibility)
Forget to unsubscribe from observables (use takeUntilDestroyed or async pipe)
Use async operations without proper error handling
Skip accessibility attributes
Expose sensitive data in client-side code
Use any type without justification
Mutate state directly in NgRx
Skip unit tests for critical logic

Output Templates

When implementing Angular features, provide:

Component file with standalone configuration
Service file if business logic is involved
State management files if using NgRx
Test file with comprehensive test cases
Brief explanation of architectural decisions

Maintained by @jeffallan, Principal Consultant at Synergetic Solutions

来源与署名

来源：jeffallan/claude-skills位于skills/angular-architect提交1be15d8

许可证： MIT

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

更多来自 jeffallan/claude-skills 的技能

Wordpress Pro

jeffallan

指导 WordPress 主题、插件、Gutenberg 区块与 WooCommerce 开发，并涵盖安全与性能实践。

Software Development11K5天前更新

Vue Expert Js

jeffallan

仅用 JavaScript 构建 Vue 3 应用，以 JSDoc 注解替代 TypeScript。

Software Development11K5天前更新

The Fool

jeffallan

用五种结构化批判性推理模式，对想法、计划和决策进行压力测试。

Research & Analysis11K5天前更新

Swift Expert

jeffallan

指导 Swift 5.9+ 的 Apple 平台开发，涵盖 SwiftUI、async/await、actor、协议与测试。

Software Development11K5天前更新

Sql Pro

jeffallan

指导 SQL 查询优化、数据库架构设计以及跨主流方言的性能问题排查。

Data & Analytics11K5天前更新

Spring Boot Engineer

jeffallan

指导 Spring Boot 3.x 后端实现：REST 控制器、JPA 数据访问、Security 6、WebFlux 与测试。

Software Development11K5天前更新

更多Software Development技能

Playground

anthropics

构建自包含的交互式 HTML 演练场，包含控件、实时预览和可复制的提示词输出。

Software Development37K今天更新

M5 Onboard

anthropics

通过 USB 检测 M5Stack ESP32 开发板，刷写 UIFlow 2.0 固件并安装 MicroPython 应用包。

Software Development37K今天更新

Cardputer Buddy

anthropics

指导迭代 Cardputer-Adv 的 MicroPython 应用包：添加应用、通过 USB 串口推送文件、查看日志并运行 REPL 命令。

Software Development37K今天更新

Testing Strategy

anthropics

设计测试策略与测试计划，涵盖测试类型、覆盖率目标与示例测试用例。

Software Development27K今天更新

Tech Debt

anthropics

识别、分类并排序技术债务，产出评分后的待办清单与分阶段整改计划。

Software Development27K今天更新

System Design

anthropics

通过需求、高层设计、深入设计、扩展与权衡分析来指导系统与架构设计。

Software Development27K今天更新

import { ChangeDetectionStrategy, Component, computed, input, output, signal } from '@angular/core';import { CommonModule } from '@angular/common';
@Component({  selector: 'app-user-card',  standalone: true,  imports: [CommonModule],  changeDetection: ChangeDetectionStrategy.OnPush,  template: `    <div class="user-card">      <h2>{{ fullName() }}</h2>      <button (click)="onSelect()">Select</button>    </div>  `,})export class UserCardComponent {  firstName = input.required<string>();  lastName = input.required<string>();  selected = output<string>();
  fullName = computed(() => `${this.firstName()} ${this.lastName()}`);
  onSelect(): void {    this.selected.emit(this.fullName());  }}

import { Component, OnInit, inject } from '@angular/core';import { takeUntilDestroyed } from '@angular/core/rxjs-interop';import { UserService } from './user.service';
@Component({ selector: 'app-users', standalone: true, template: `...` })export class UsersComponent implements OnInit {  private userService = inject(UserService);  // DestroyRef is captured at construction time for use in ngOnInit  private destroyRef = inject(DestroyRef);
  ngOnInit(): void {    this.userService.getUsers()      .pipe(takeUntilDestroyed(this.destroyRef))      .subscribe({        next: (users) => { /* handle */ },        error: (err) => console.error('Failed to load users', err),      });  }}

// actionsexport const loadUsers = createAction('[Users] Load Users');export const loadUsersSuccess = createAction('[Users] Load Users Success', props<{ users: User[] }>());export const loadUsersFailure = createAction('[Users] Load Users Failure', props<{ error: string }>());
// reducerexport interface UsersState { users: User[]; loading: boolean; error: string | null; }const initialState: UsersState = { users: [], loading: false, error: null };
export const usersReducer = createReducer(  initialState,  on(loadUsers, (state) => ({ ...state, loading: true, error: null })),  on(loadUsersSuccess, (state, { users }) => ({ ...state, users, loading: false })),  on(loadUsersFailure, (state, { error }) => ({ ...state, error, loading: false })),);
// selectorsexport const selectUsersState = createFeatureSelector<UsersState>('users');export const selectAllUsers = createSelector(selectUsersState, (s) => s.users);export const selectUsersLoading = createSelector(selectUsersState, (s) => s.loading);