Angular Developer Toolkit

A comprehensive VS Code extension for Angular development that adds a custom Activity Bar view with powerful tools, commands, and shortcuts. Built for Angular developers who want a streamlined workflow.

✨ Features

🏗️ Code Generation

Click to generate Angular schematics with prompts for names:

Component - Generate components with configured style
Service - Create injectable services
Module - Generate feature modules
Directive - Create custom directives
Pipe - Generate transformation pipes
Guard - Create route guards
Interceptor - Generate HTTP interceptors
Interface - Create TypeScript interfaces
Class - Generate TypeScript classes
Enum - Create TypeScript enums

All schematics use your configured default style (scss/css) and respect Angular CLI settings.

⚙️ Build & Test Commands

One-click access to common Angular CLI commands:

Run App - Start development server (ng serve)
Build App - Production build (ng build)
Test - Run unit tests (ng test)
Lint - Run linter (ng lint)
E2E - Run end-to-end tests (ng e2e)
Add Dependency - Add packages via ng add
Update Dependency - Update packages via ng update

🖥️ Server Controls

Manage your development server:

Start Server - Launch dev server in integrated terminal with configured port
Restart Server - Stop and restart the dev server
Open in Browser - Open app at configured port (default: http://localhost:4200)
Auto-open browser support (configurable)
Custom port configuration

Quick access to project files:

Go to Component - Prompt to open component file
Go to Template - Quick navigate to template files
Open angular.json - Open configuration file

📦 Dependencies

View all project dependencies:

Lists dependencies from package.json
Shows dev dependencies separately
Displays version information
Click for more info

🔧 Smart Features

Nested Project Detection - Recursively searches for angular.json in workspace (configurable depth)
Pick Project Folder - Manually select Angular project when multiple exist
Workspace-Local CLI - Prefers node_modules/.bin/ng when available
Status Bar Indicator - Shows "Angular project detected ✅" when active
Context Menu - Right-click .ts files to generate related HTML/SCSS
Refresh View - Manual refresh command
Persistent Settings - Remembers selected project and server state

📋 Requirements

Angular CLI installed (global or local)
Angular project with angular.json in workspace
Node.js and npm

🚀 Installation & Usage

Install Dependencies

npm install

Build Extension

npm run compile

Launch Extension Development Host

code --extensionDevelopmentPath=.

Or press F5 in VS Code to start debugging.

Using the Extension

Open a workspace containing an Angular project (with angular.json)
Click the Angular Toolkit icon in the Activity Bar
Browse sections: Generate, Commands, Server, Navigation, Dependencies
Click any item to execute the action
Follow prompts for names, options, etc.
Output appears in "Angular Toolkit" output channel

⚙️ Configuration

Access via Settings (Ctrl+,) → Extensions → Angular Toolkit:

Setting	Default	Description
`angularToolkit.cliPath`	`"ng"`	Path to Angular CLI executable
`angularToolkit.defaultStyle`	`"scss"`	Default style extension (scss/css)
`angularToolkit.autoOpenBrowser`	`true`	Auto-open browser when starting server
`angularToolkit.serverPort`	`4200`	Default dev server port
`angularToolkit.searchDepth`	`3`	Depth to search for angular.json

🎯 Command Palette Integration

All actions are also available via Command Palette (Ctrl+Shift+P):

Angular Toolkit: Generate Component
Angular Toolkit: Run App in Terminal
Angular Toolkit: Refresh View
Angular Toolkit: Pick Angular Project Folder
And more...

🎨 Activity Bar View

Angular Toolkit
├── 🏗️ Generate
│   ├── Component
│   ├── Service
│   ├── Module
│   ├── Directive
│   ├── Pipe
│   ├── Guard
│   ├── Interceptor
│   ├── Interface
│   ├── Class
│   └── Enum
├── ⚙️ Commands
│   ├── Run App
│   ├── Build App
│   ├── Test
│   ├── Lint
│   ├── E2E
│   ├── Add Dependency
│   └── Update Dependency
├── 🖥️ Server
│   ├── Start Server
│   ├── Restart Server
│   └── Open in Browser
├── 📂 Navigation
│   ├── Go to Component
│   ├── Go to Template
│   └── Open angular.json
└── 📦 Dependencies
    ├── @angular/core @ ^17.0.0
    ├── @angular/common @ ^17.0.0
    └── ... (all dependencies listed)

🛠️ Development

Watch mode for continuous compilation:

npm run watch

📝 Notes

Extension uses child_process.exec to run Angular CLI commands
Output is streamed to "Angular Toolkit" output channel
Supports workspace folders with nested Angular projects
Terminal integration for long-running commands (ng serve)
Context menu available on .ts files

🎉 Enjoy!

Built with ❤️ for Angular developers.

KAngtool

K_LANG