Build & Deployment

Build Configuration

Angular build configuration in angular.json:

Project Name: project (generic name) Output Directory: dist/agent Source Root: src

Build Commands

Development Build

npm run build-dev
# Creates development build with source maps
# Output: dist/agent/

Production Build

npm run build
# Optimized production build
# Features:
#   - Minification
#   - Tree shaking
#   - AOT compilation
#   - Output hashing (cache busting)
# Output: dist/agent/

Build Optimization

Production Optimizations:

• Ahead-of-Time (AOT) compilation
• Bundle minification
• Dead code elimination (tree shaking)
• Output hashing for cache busting (--output-hashing=all)
• Lazy loading for smaller initial bundle

Deployment Steps

1. Build the application

npm run build

2. Deploy dist/agent/ directory to web server

   • Configure web server for single-page application
   • Redirect all routes to index.html

3. Configure API endpoints

   • Update src/app/addrezz.ts before building
   • Set production API URLs

4. Environment Configuration

   • Production: src/environments/environment.prod.ts
   • Development: src/environments/environment.ts

Web Server Configuration

Nginx Example:

server {
    listen 80;
    server_name yourdomain.com;
    root /path/to/dist/agent;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

Apache Example:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
</IfModule>

Performance Considerations

1. Lazy Loading - Feature modules loaded on demand
2. Code Splitting - Separate bundles for vendor and app code
3. Output Hashing - Cache busting for updated files
4. Compression - Enable gzip/brotli on web server
5. CDN - Serve static assets from CDN