GitHub Copilot for Angular & NgRx - Workshop Demo

This repository demonstrates how to set up and configure GitHub Copilot in Visual Studio Code for Angular development with NgRx Signals Store. It showcases a complete task management application built using modern Angular 22 patterns, enhanced by intelligent Copilot assistance — with all agent config managed declaratively via APM.

The claude-code branch shows the same project configured for Claude Code. Both branches share the same .apm/ sources and differ only in the compiled output.

🚀 GitHub Copilot Setup for Visual Studio Code

Prerequisites

1. GitHub Copilot subscription — Individual, Business, or Enterprise
2. Visual Studio Code with the GitHub Copilot extension installed
3. Node.js 22+ and npm

Step 1: Install Required Extensions

Install these VS Code extensions for the best Angular + Copilot experience:

# GitHub Copilot (chat + completions in one extension)
code --install-extension GitHub.copilot-chat

# Angular language support
code --install-extension Angular.ng-template
code --install-extension ms-vscode.vscode-typescript-next

Step 2: Configure Copilot for Angular & NgRx

All agent config is generated by APM from sources in .apm/ + apm.yml. Run apm install --target copilot && apm compile --target copilot --no-dedup to (re)generate; never hand-edit the generated files. The setup:

• AGENTS.md at the repo root is the generated digest of project conventions, loaded by every agent (Copilot, Copilot CLI, Claude Code, Codex). Authored as .apm/instructions/.
• Instructions generate to .github/copilot-instructions.md (global) and .github/instructions/** (path-scoped via applyTo).
• Agent skills are deployed to .agents/skills/ and loaded automatically.
• MCP servers are declared in apm.yml › dependencies.mcp and written to .vscode/mcp.json.

CodeGraph index: apm install writes the codegraph MCP server config, but the tree-sitter index is not built automatically. Run apm run codegraph-setup (= codegraph init) once to create the gitignored .codegraph/ index — otherwise the codegraph_* tools report "not initialized".

Step 3: Skills

Library skills come from external APM dependencies (apm.yml › dependencies.apm), version-pinned in apm.lock.yaml and deployed to .agents/skills/:

Skill	Source	When it fires
angular-developer	angular/skills	General Angular 22 guidance (DI, routing, styling)
angular-new-app	angular/skills	Creating a new Angular workspace
ngrx-signals	danielsogl/skills	Authoring or testing a NgRx Signal Store
bdd	danielsogl/skills	Gherkin/Cucumber specs, Playwright BDD
skill-creator	anthropics/skills	Authoring or improving a skill

Step 4: Reusable Prompts

Ready-to-use prompt templates in .github/prompts/ (authored in .apm/prompts/):

• analyze-codebase-bugs.prompt.md — Structured bug-focused review of files, folders, or the workspace
• angular-signal-forms.prompt.md — Scaffold a complete Signal Forms component
• ngrx-signals-store-crud.prompt.md — Generate a full NgRx Signal Store with CRUD
• code-review.prompt.md — Angular code review checklist

Step 5: Custom Agents

Specialized agents in .github/agents/ (authored in .apm/agents/) for automated tasks:

• playwright-test-planner — Build a structured E2E test plan by exploring the app
• playwright-test-generator — Generate a single Playwright spec from a plan item
• playwright-test-healer — Debug and fix failing Playwright tests

📁 Project Structure & Architecture

This project follows Domain-Driven Design (DDD). Each domain under src/app/features/<domain>/ is split into four layers:

Layer	Purpose
feature/	Smart container components (route-level, inject stores)
ui/	Presentational components (dumb, OnPush, no store injection)
data/models/	TypeScript interfaces and types
data/infrastructure/	HTTP services (*-api.ts)
data/state/	NgRx Signal Stores (*-store.ts)
util/	Pure helper functions

Example Folder Structure

src/app/
  app.ts
  app.config.ts
  app.routes.ts
  core/
    navbar/
      navbar.ts
      navbar.html
      navbar.scss
  features/
    tasks/
      feature/
        task-dashboard/
          task-dashboard.ts
          task-dashboard.html
          task-dashboard.spec.ts
      ui/
        task-card/
          task-card.ts
          task-card.html
          task-card.spec.ts
        task-form-dialog/
          task-form-dialog.ts
          task-form-dialog.html
      data/
        models/
          task.model.ts
        infrastructure/
          task-api.ts
          task-api.spec.ts
        state/
          task-store.ts
      util/
        task-helpers/
          task-helpers.ts
          task-helpers.spec.ts

Note: Barrel files (index.ts) are strictly prohibited. Import directly from the source file.

🛠️ Tech Stack

Technology	Version	Role
Angular	22	Framework — standalone, signals, @if/@for control flow
TypeScript	6.0	Strict mode, no any
NgRx Signals	21	State management (signalStore, withEntities, rxMethod)
Angular Material	22	UI — Material 3 via mat.theme() mixin
Angular Signal Forms	22	form(), schema(), FormField directive
Vitest	4	Unit testing via @angular/build:unit-test
Playwright	1.61	E2E testing
json-server	—	Local mock REST API on http://localhost:3000
ESLint	10	Flat config with angular-eslint, @ngrx/eslint-plugin
Prettier	3	Code formatting
Lefthook	2	Git hooks — auto-format & auto-lint on commit
APM	0.20	Agent Package Manager — compiles .apm/ → .github/

✨ Demo Application

A task management app demonstrating real-world Angular 22 + NgRx patterns:

• Kanban Board: Tasks organized by status — To Do, In Progress, Completed
• Task CRUD: Create, edit, delete tasks via a Signal Forms dialog
• Drag & Drop: Reorder tasks within and across columns
• Filters: Filter tasks by priority and search term
• Dashboard Stats: Live computed statistics (total, overdue, completion rate)

🔧 Development

# Install dependencies
npm install

# Start dev server + mock API (concurrently)
npm start           # Angular dev server on :4200, json-server on :3000

# Run unit tests
npm test

# Run E2E tests
npm run test:e2e

# Build for production
npm run build

# Lint
npm run lint

Git Hooks (Lefthook)

Lefthook runs automatically on git commit:

• Prettier formats all staged files (.ts, .html, .scss, .json, .md, …)
• ESLint auto-fixes staged .ts and .html files

📚 Resources

• Angular Documentation
• NgRx Signals Documentation
• Angular Material
• GitHub Copilot for VS Code
• Vitest
• Playwright