How to Deploy & Use angular/angular

# Angular Deploy & Usage Guide

Complete guide for setting up, building, and deploying Angular applications using the Angular CLI.

## Prerequisites

- **Node.js**: Active LTS version (v18 or v20 recommended). Download from [nodejs.org](https://nodejs.org/).
- **npm**: Included with Node.js installation (v9.6+ recommended).
- **Git**: Required for cloning starter templates and version control.

## Installation

### 1. Install Angular CLI globally
```bash
npm install -g @angular/cli

2. Create a new workspace and application

ng new [PROJECT-NAME]

• Select CSS/SCSS/Sass/Less for styling during prompts.
• Enable Server-Side Rendering (SSR) if deploying to Node.js servers (optional).

3. Navigate to project directory

cd [PROJECT-NAME]

Configuration

Workspace Configuration (angular.json)

Located in the project root, this file controls build targets, assets, and optimization settings:

{
  "projects": {
    "[PROJECT-NAME]": {
      "architect": {
        "build": {
          "options": {
            "outputPath": "dist/[PROJECT-NAME]",
            "index": "src/index.html",
            "main": "src/main.ts"
          },
          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all"
            }
          }
        }
      }
    }
  }
}

Environment Configuration

Create environment-specific files in src/environments/:

• environment.ts (development)
• environment.prod.ts (production)

Import these into your application for API keys or feature flags:

import { environment } from '../environments/environment';

TypeScript Configuration

The tsconfig.json (and tsconfig.app.json) control compiler options. Key settings for deployment:

• "target": "ES2022" (modern browser support)
• "module": "ES2022" (for tree-shaking optimization)

Build & Run

Development Server

Start the local development server with hot-reload:

ng serve

• Access at http://localhost:4200
• Changes reflect automatically in the browser

Production Build

Generate optimized static files for deployment:

ng build --configuration production

• Output directory: dist/[PROJECT-NAME]/
• Files are minified, tree-shaken, and hashed for cache busting

Server-Side Rendering (SSR) Build

If SSR was enabled during project creation:

ng build --configuration production
node dist/[PROJECT-NAME]/server/server.mjs

• Runs on http://localhost:4000 by default
• Required for Angular Universal applications

Testing (Pre-deployment)

# Unit tests (Karma/Jasmine)
ng test

# End-to-end tests (Playwright/Selenium)
ng e2e

Deployment

Static Hosting (Recommended for SPAs)

Upload the contents of dist/[PROJECT-NAME]/browser/ (or dist/[PROJECT-NAME]/ for non-SSR) to:

Firebase Hosting

npm install -g firebase-tools
firebase init hosting
firebase deploy

Netlify/Vercel Connect your Git repository to trigger automatic builds on push:

• Build command: ng build --configuration production
• Publish directory: dist/[PROJECT-NAME]/browser

AWS S3 + CloudFront

aws s3 sync dist/[PROJECT-NAME]/browser s3://your-bucket-name --acl public-read

Server-Side Rendering (Node.js)

For SSR-enabled applications:

Traditional Node.js Server

# Build first
ng build --configuration production

# Start the server
node dist/[PROJECT-NAME]/server/server.mjs

• Requires Node.js v18+ on the production server
• Set PORT environment variable to configure listening port (default: 4000)

Docker Deployment

FROM node:20-alpine
WORKDIR /app
COPY dist/ ./
EXPOSE 4000
CMD ["node", "server/server.mjs"]

Platform-Specific Notes

Vercel/Netlify: Configure angular.json output path or set build command to output to the platform's expected directory (usually dist/).

GitHub Pages: Use ng deploy (if @angular/fire or angular-cli-ghpages is installed) or manually push browser/ contents to gh-pages branch.

Nginx Configuration (for custom servers):

location / {
  try_files $uri $uri/ /index.html;
  add_header Cache-Control "no-cache";
}

Troubleshooting

Port 4200 already in use

# Kill process or use different port
ng serve --port 4201

ng command not found

Ensure global npm packages are in your PATH:

# Check installation
npm list -g @angular/cli

# If missing, reinstall
npm install -g @angular/cli

# Or use npx (no global install)
npx @angular/cli new [PROJECT-NAME]

Node version incompatibility

Angular v17+ requires Node.js v18.13.0 or v20.9.0+. Check with:

node --version

Use nvm to manage Node versions if needed.

Build memory errors

For large applications, increase Node.js memory limit:

node --max-old-space-size=4096 ./node_modules/@angular/cli/bin/ng build --configuration production

SSR hydration mismatches

If using SSR and seeing console errors about hydration:

• Ensure provideClientHydration() is included in app.config.ts providers
• Check that browser-only APIs (window, document) are accessed only in afterNextRender or isPlatformBrowser guards

Static files 404 on refresh

Configure your web server to serve index.html for all 404 routes (SPA fallback), or use HashLocationStrategy in your app module.

providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }]