skills.rest
alexander-kastil
alexander-kastilCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ng-configure-element

Configure Angular projects for Angular Elements distribution with dual build and serve setups.

Updated Mar 5, 2026
Search Tags:#automation#typescript#angular#web-components#angular-cli#angular-elements
One-click install
npx skills add https://github.com/alexander-kastil/advanced-angular-agentic-swe --skill ng-configure-element
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ng-configure-element
Source: https://github.com/alexander-kastil/advanced-angular-agentic-swe/tree/main/.claude/skills/ng-configure-element
Command: npx skills add https://github.com/alexander-kastil/advanced-angular-agentic-swe --skill ng-configure-element

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Angular teams often struggle to publish features as web components while maintaining a smooth development workflow. This skill adds dual build configurations and element entry points to streamline Angular Elements distribution.

Core Features & Use Cases

  • Creates app.config.element.ts and main.element.ts to bootstrap Angular Elements.
  • Updates angular.json with element build and serve configurations for seamless development and distribution.
  • Adds tsconfig.app.json entries so the element entry point is type-checked alongside the main app.
  • Provides guidance and scripts to convert existing components into reusable web components.

Quick Start

Run the ng-configure-element script against your Angular project path to set up the element configuration.

Frequently Asked Questions about ng-configure-element

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I configure Angular Elements for dual builds?▼

You need dedicated element entry points like main.element.ts and app.config.element.ts alongside modified angular.json and tsconfig.app.json files to support both standard development and web component distribution builds.

What does app.config.element.ts do in an Angular web components project?▼

The app.config.element.ts file bootstraps Angular Elements by initializing the application configuration specifically for web component distribution, separate from the main application entry point.

Can I run a development server and build Angular Elements in the same project?▼

Yes, adding dedicated element build and serve configurations to angular.json allows you to run standard development builds and Angular Elements builds within the same project workspace.

How do I set up Angular Elements distribution in an existing project?▼

Setting up Angular Elements distribution involves creating main.element.ts and app.config.element.ts entry points, updating angular.json build configurations, and modifying tsconfig.app.json for type-checking web component outputs.

Do I need to update tsconfig.app.json for Angular Elements?▼

Yes, tsconfig.app.json must include entries for the element entry point so that main.element.ts and app.config.element.ts are type-checked alongside the main Angular application.

Related Skills

Explore More Software Engineering Skills→
shaprisshapris

angular-tooling

Run Angular CLI commands for project setup, scaffolding, builds, and tests.

Community
Advanced
alexander-kastilalexander-kastil

ng-register-elements

Configure Angular projects for web component distribution with dual development and production setups.

Community
Advanced
bughqbughq
2

stacks-build

Automate Stacks framework compilation and packaging with Bun and Vite.

Official
Advanced
mgd34msumgd34msu
4

web-components

Generate reusable custom HTML elements with Custom Elements and Shadow DOM.

Community
Intermediate