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今天更新

Dpop Adoption

google

指導為 Google OAuth 平台實作 OAuth 2.0 DPoP（RFC 9449）傳送方約束的更新權杖。

Software Development21K今天更新

Gemini Live Api

google

產生 Gemini Live API WebSocket 用戶端類別、測試、文件，以及用於雙向串流的示範介面。

Software Development21K今天更新

Gemini Api

google

說明如何在 Google Agent Platform 上使用 Gen AI SDK 呼叫 Gemini API，涵蓋多種語言與多項功能。

Software Development21K今天更新

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);