angular

🅰️ Angular Development Container

Complete Angular development environment with CLI, TypeScript, and modern tooling

📋 Overview

This development container provides a complete Angular development environment with:

• ✅ Node.js 20 LTS
• ✅ Angular CLI latest version
• ✅ TypeScript support
• ✅ ESLint and Prettier
• ✅ Hot reload development server
• ✅ Angular Material ready

🚀 Quick Start

1. Open in VS Code

   code .

2. Reopen in Container

   • Press F1 → Dev Containers: Reopen in Container

3. Create your first Angular app

   ng new my-app
   cd my-app
   ng serve --host 0.0.0.0

4. Access your app

   • Open browser at http://localhost:4200

🛠️ Included Tools

Runtime & Package Managers

• 📦 Node.js 20 - Latest LTS version
• 🔧 npm - Package manager
• 🧶 yarn - Alternative package manager

Angular Tools

• 🅰️ Angular CLI - Official Angular tooling
• 📘 TypeScript - Type-safe JavaScript
• 🏗️ Angular DevKit - Build tools

Code Quality

• ✨ ESLint - JavaScript/TypeScript linter
• 💅 Prettier - Code formatter

📦 VS Code Extensions

• angular.ng-template - Angular language service
• johnpapa.angular2 - Angular snippets
• cyrilletuzi.angular-schematics - Angular schematics
• dbaeumer.vscode-eslint - ESLint integration
• esbenp.prettier-vscode - Prettier formatter
• nrwl.angular-console - Angular Console
• ms-vscode.vscode-typescript-next - TypeScript support

🎨 Customization

Multi-Stage Dockerfile

1. base - Node.js 20
2. build-tools - npm, yarn
3. angular-cli - Angular CLI, TypeScript
4. dev-tools - Linting, formatting
5. tools - Additional utilities
6. development - Dev environment
7. builder - Build stage
8. production - Nginx runtime

💡 Usage Examples

Create New Project

# New Angular application
ng new my-app

# With routing
ng new my-app --routing

# With SCSS
ng new my-app --style=scss

# Standalone components (Angular 15+)
ng new my-app --standalone

Development

# Start dev server
ng serve --host 0.0.0.0

# Start with specific port
ng serve --port 4300 --host 0.0.0.0

# Build for production
ng build --configuration production

# Run tests
ng test

# Run e2e tests
ng e2e

# Generate code coverage
ng test --code-coverage

Generate Components

# Component
ng generate component my-component
ng g c my-component

# Service
ng generate service my-service
ng g s my-service

# Module
ng generate module my-module
ng g m my-module

# Directive
ng generate directive my-directive

# Pipe
ng generate pipe my-pipe

# Guard
ng generate guard my-guard

# Interface
ng generate interface my-interface

Add Libraries

# Angular Material
ng add @angular/material

# Angular PWA
ng add @angular/pwa

# Angular Universal (SSR)
ng add @nguniversal/express-engine

# NgRx (State Management)
ng add @ngrx/store
ng add @ngrx/effects

# Tailwind CSS
ng add @angular/tailwindcss

📚 Popular Libraries

# Angular Material
ng add @angular/material

# PrimeNG
npm install primeng primeicons

# NGX-Bootstrap
ng add ngx-bootstrap

# Angular Fire (Firebase)
ng add @angular/fire

# Apollo GraphQL
ng add apollo-angular

# NgRx
ng add @ngrx/store @ngrx/effects @ngrx/store-devtools

# RxJS Utilities
npm install lodash-es
npm install -D @types/lodash-es

Code Quality

# Lint code
ng lint

# Format code
npx prettier --write .

# Type check
npx tsc --noEmit

# Update Angular
ng update @angular/cli @angular/core

🧪 Testing

# Unit tests
ng test

# E2E tests
ng e2e

# Test with coverage
ng test --code-coverage --watch=false

# Test specific file
ng test --include='**/*.spec.ts'

🏗️ Project Structure

my-app/
├── .angular/
├── .vscode/
├── src/
│   ├── app/
│   │   ├── app.component.ts
│   │   ├── app.component.html
│   │   ├── app.component.scss
│   │   └── app.module.ts
│   ├── assets/
│   ├── environments/
│   └── index.html
├── angular.json
├── package.json
└── tsconfig.json

🐛 Debugging

Press F5 to launch Chrome debugger with your Angular app.

🌐 Ports

• 4200 - Angular dev server default

📚 Resources

• Angular Documentation
• Angular CLI
• Angular Material
• RxJS Documentation
• TypeScript Documentation

---

Happy Coding! 🎉