Angular Development Environment

Code name: angular-dev

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

Also included automatically: repairs broken host paths in your git config and restores your SSH commit-signing key on every attach, on both local and cloud containers, with nothing to set up on your end — see helpers4-common for how it works.

When to use this

Use this feature for an Angular project where you want the curated extension set and CLI autocompletion set up without picking them one by one. For general TypeScript/JavaScript tooling that isn’t Angular-specific, see typescript-dev instead.

Alternatives:

• Angular’s own ng completion sets up autocompletion too, but you’d need to source it into your shell profile yourself on every container — this feature wires it into both zsh and bash automatically.
• Hand-picking the 7 extensions below yourself works fine for a one-off project, but drifts across projects and needs to be redone whenever you set up a new devcontainer.

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

Version History

• v1.2.3: Documentation only, no functional change — added a “When to use this” section with alternatives, matching the equivalent sections other features in this catalog already had.
• v1.2.2: Documentation only, no functional change — the previous wording sweep made the JSON description field far too long, shifting focus away from the feature itself onto the self-heal side benefit. Shortened to 5 words and kept generic (no implementation detail like “git config”), matching the original’s brevity and level of detail.
• v1.2.1: Documentation only, no functional change — the self-heal callout above (and the JSON description field) led with internal jargon (“helpers4’s self-heal”) instead of the actual benefit; reworded to lead with what it does, with the full mechanism staying in helpers4-common’s own README.
• v1.2.0: Documentation only, no functional change — mentions that helpers4-common’s automatic git-config self-heal (see above) now comes along with this feature.
• v1.1.0: Switched from an inline copy of helpers4-common’s bootstrap (user detection, apt helpers) to a direct dependsOn on the helpers4-common feature — no behavior change, just a single source of truth for that logic instead of a copy every feature had to keep in sync.