Deployment and Best Practices

When you're ready to release your Angular application, you should create an optimized production build. The Angular CLI automatically enables several optimizations that improve performance and reduce bundle size.

Production builds include:

• Ahead-of-Time (AoT) compilation
• Tree-shaking to remove unused code
• JavaScript and CSS minification
• Build optimization
• Dead code elimination

Generate a production build using:

ng build --configuration production

The optimized files are generated inside the dist/ folder.

Analyzing Bundle Size

Large bundles increase page load time. You can inspect your application's bundle using source-map-explorer.

Install the package:

npm install -g source-map-explorer

Generate source maps during the production build:

ng build --configuration production --source-map

Analyze the generated bundle:

source-map-explorer dist/my-app/*.js

This helps identify large dependencies and opportunities for optimization.

Environment-specific Configuration

Angular supports different configuration files for development and production environments.

environment.ts (Development)

export const environment = {

production: false,

apiUrl: 'http://localhost:3000/api'

};

**environment.prod.ts (Production)**

export const environment = {

production: true,

apiUrl: 'https://api.myapp.com'

};

Use the environment values inside your services:

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

private apiUrl = environment.apiUrl;

When you create a production build, Angular automatically replaces environment.ts with environment.prod.ts.

Angular applications normally render entirely in the browser. Angular Universal enables Server-Side Rendering (SSR), where pages are rendered on the server before being sent to the client.

SSR improves:

• Search Engine Optimization (SEO)
• Initial page load speed
• First Contentful Paint (FCP)
• Social media previews
• User experience on slower networks

Adding Angular Universal

Enable SSR in an existing Angular application:

ng add @angular/ssr

Angular automatically configures the necessary server files and build settings.

Running the SSR Application

Start the development server with SSR enabled:

npm run dev:ssr

Build the production application:

npm run build:ssr

Serve the production build:

npm run serve:ssr

When Should You Use Angular Universal?

Angular Universal is recommended for:

• Public websites
• Marketing pages
• Blogs
• News portals
• E-commerce websites
• Applications requiring better SEO

For authenticated dashboards and internal business applications, client-side rendering is often sufficient.

Continuous Integration and Continuous Deployment (CI/CD) automate building, testing, and deploying Angular applications whenever changes are pushed to a repository.

A typical CI/CD pipeline performs the following steps:

1. Pull the latest source code.
2. Install project dependencies.
3. Run automated tests.
4. Generate a production build.
5. Deploy the application.

Example GitHub Actions Workflow

Create the following workflow inside:

.github/workflows/angular.yml

name: Angular CI

on:
push:
branches:
- main

jobs:
build:
runs-on: ubuntu-latest

steps:
- uses: actions/checkout@v4

- uses: actions/setup-node@v4
with:
node-version: 20

- run: npm ci

- run: npm run test -- --watch=false --browsers=ChromeHeadless

- run: npm run build -- --configuration production

This workflow automatically builds and tests the Angular application whenever code is pushed to the main branch.

Deploying to Firebase Hosting

Firebase Hosting provides a simple way to deploy Angular applications.

Install Firebase CLI:

npm install -g firebase-tools

Log in to Firebase:

firebase login

Initialize hosting:

firebase init hosting

Generate the production build:

ng build --configuration production

Deploy the application:

firebase deploy

Deploying with Nginx

When deploying to your own server, configure Nginx to redirect all application routes to index.html. This allows Angular's router to handle navigation correctly.

server {

listen 80;

root /var/www/my-app/dist;

index index.html;

location / {

try_files $uri $uri/ /index.html;

}

location ~* \.(js|css|png|jpg|ico)$ {

expires 1y;

add_header Cache-Control "public, immutable";

}

}

Without the try_files directive, refreshing any route other than the root URL (/) results in a 404 Not Found error because the web server attempts to locate a physical file instead of allowing Angular Router to manage the route.