메뉴
Configure Angular projects for web components (Angular Elements) with dual development and distribution configurations.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | ng-register-elements |
| description | Configure Angular projects for web components (Angular Elements) with dual development and distribution configurations. |
Automatically set up any Angular 21+ project for web component distribution with dual configurations:
node scripts/ng-configure-element.js <project-path>
npm start # Dev with zoneless change detection
npm run serve:element # Preview element without zoneless
npm run build:element # Build web component for distribution
src/main.element.ts - Element entry pointsrc/app/app.config.element.ts - Element configuration (no zoneless)scripts/serve-element.sh - Element dev serverscripts/build-element.sh - Element build scriptpackage.json with new npm commandsDevelopment (npm start):
provideZonelessChangeDetection()Distribution (serve:element / build:element):
# Configure a project
node scripts/ng-configure-element.js demos/11-elements/skills-list
# Test all three modes
cd demos/11-elements/skills-list
npm start # Dev mode
npm run serve:element # Element preview
npm run build:element # Build for distribution
Angular, Elements, Web Components, standalone components, configuration, TypeScript, distribution
Consolidated Angular conventions for components, dependency injection, forms, HTTP, routing, signals, MSAL authentication, and A2UI generative UI. Use when working on Angular applications and you need modern Angular guidance or routing into a specific Angular concern. Triggers on component creation, inject(), signal forms, httpResource(), guards, route configuration, computed(), linkedSignal(), MSAL, Azure Entra, A2UI, agent-driven / generative UI, Angular architecture, load-once data loading, ensureLoaded guards, duplicate HTTP requests, refetch-after-CRUD elimination, and production bundle-size optimization (initial budget exceeded, main.js too big, tree-shaking, lazy-init).
Complete installation and configuration guide for ngx-markdown and its plugins in Angular projects. Use when setting up markdown rendering with syntax highlighting, diagrams, and advanced features.
Step-by-step guide for implementing Playwright E2E testing in Angular v20+ projects. Covers installation, configuration, test organization with fixtures and page objects, and best practices for modern standalone components with Vitest and Playwright integration.
Add a new demo to any module under demos/. Registers it in db.json, generates the component, adds the route, adds the markdown renderer, and creates an empty guide. Triggers on: add demo, create demo, new demo, register demo.
Step-by-step guide for migrating Angular projects from Karma/Jasmine to Vitest (Angular v20/21+). Includes dependency management, configuration setup, test file API migration, and best practices for zoneless/OnPush testing.
Expert guidance for creating accessible code conforming to WCAG 2.2 Level AA. Use for accessibility compliance, component architecture, keyboard navigation, focus management, contrast verification, and inclusive UI patterns.