Angular Development Environment (angular-dev)

Angular Development Environment (angular-dev)

Angular-specific development environment with VS Code extensions and CLI autocompletion.

Features

• VS Code extensions: Essential Angular development extensions pre-installed
• CLI autocompletion: Tab completion for Angular CLI commands in zsh and bash
• Optional CLI installation: Install Angular CLI globally if needed

Usage

Add this feature to your devcontainer.json:

{
    "features": {
        "ghcr.io/helpers4/devcontainer/angular-dev:1": {}
    }
}

With Port Forwarding (Recommended)

For the best development experience, add port forwarding for the Angular dev server:

{
    "features": {
        "ghcr.io/helpers4/devcontainer/angular-dev:1": {}
    },
    "forwardPorts": [4200],
    "portsAttributes": {
        "4200": {
            "label": "Angular Dev Server",
            "onAutoForward": "notify"
        }
    }
}

With Angular CLI installation

If you want to install Angular CLI as part of this feature:

{
    "features": {
        "ghcr.io/helpers4/devcontainer/angular-dev:1": {
            "installCli": true
        }
    }
}

Recommended setup with Node.js

{
    "features": {
        "ghcr.io/devcontainers/features/node:1": {
            "version": "20"
        },
        "ghcr.io/helpers4/devcontainer/angular-dev:1": {
            "installCli": true
        }
    },
    "forwardPorts": [4200],
    "portsAttributes": {
        "4200": {
            "label": "Angular Dev Server",
            "onAutoForward": "notify"
        }
    }
}

Options

Option	Type	Default	Description
installCli	boolean	false	Install Angular CLI globally

VS Code Extensions Included

Extension	Description
angular.ng-template	Angular Language Service
johnpapa.angular2	Angular Snippets
infinity1207.angular2-switcher	Switch between component files
alexiv.vscode-angular2-files	Generate Angular files
obenjiro.arrr	Angular Refactoring Tools
john-crowson.angular-file-changer	Quick file navigation
cyrilletuzi.angular-schematics	Angular Schematics integration

Port Configuration

The Angular dev server runs on port 4200 by default. Since DevContainer features cannot configure port forwarding directly, you need to add it to your devcontainer.json:

{
    "forwardPorts": [4200],
    "portsAttributes": {
        "4200": {
            "label": "Angular Dev Server",
            "onAutoForward": "notify"
        }
    }
}

Port	Purpose	Recommended Action
4200	Angular Dev Server	Add to forwardPorts in devcontainer.json

CLI Autocompletion

Angular CLI autocompletion is automatically configured for both zsh and bash shells. After the container starts, you can use tab completion for:

• ng <tab> - Show available commands
• ng generate <tab> - Show schematic types
• ng add <tab> - Show available packages

Working with Angular

Create a new application

ng new my-app --routing --style=scss
cd my-app
ng serve

Generate components

ng generate component features/user-profile
ng generate service core/api
ng generate module shared --routing

Build for production

ng build --configuration production

Troubleshooting

Angular CLI not found

If ng command is not available:

1. Ensure Node.js feature is installed before this feature
2. Set installCli: true in the feature options
3. Or install manually: npm install -g @angular/cli

Autocompletion not working

• Start a new terminal session after container creation
• Ensure you’re using zsh or bash shell
• Check that Angular CLI is installed: which ng

Port 4200 not accessible

• Ensure forwardPorts: [4200] is in your devcontainer.json
• Check if another process is using port 4200
• Verify the dev server is running: ng serve
• Check VS Code’s Ports panel for forwarding status