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

• 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

Add this feature to your devcontainer.json:

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

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"
        }
    }
}

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

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

{
    "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"
        }
    }
}

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"
        }
    }
}

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

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

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

ng build --configuration production

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

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

• 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