28. Publishing and Deployment: Building and Packaging Angular Applications

In the previous chapter, we explored the structure of Angular projects and best practices—particularly the importance of code reuse and modularity. In this chapter, we’ll dive deep into building and packaging Angular applications for deployment to a server.

What Are Building and Packaging?

Building and packaging refer to the process of transforming an application developed in a local environment into a production-ready, deployable version. This process includes code minification, bundling, and optimization—aiming to improve application load time and runtime performance.

The Build Process

Angular simplifies the build and packaging workflow using the Angular CLI. With Angular CLI, generating a production-ready build is straightforward. First, ensure @angular/cli is installed in your Angular project.

From your project directory, run the following command to generate a build:

ng build --prod

The --prod flag instructs Angular CLI to produce an optimized build tailored for production. The output will be placed in the dist/ folder.

1. Output Contents

The dist/ folder contains the following key files:

• index.html: The application’s entry point.
• main.js: The primary JavaScript bundle containing your application logic.
• polyfills.js: JavaScript code that ensures compatibility with older browsers.
• styles.css: The global stylesheet.
• Other dependencies and static assets (e.g., fonts, images, icons).

All generated files are minified and optimized—ensuring optimal performance in production.

Configuring Angular Builds

You can customize the build process via the angular.json configuration file. For example, you may specify custom output paths, define environment-specific settings, or adjust asset naming conventions.

{
  "projects": {
    "your-app-name": {
      "architect": {
        "build": {
          "options": {
            "outputPath": "dist/your-app-name",
            "optimization": true,
            "sourceMap": false,
            "extractCss": true
          }
        }
      }
    }
  }
}

Using Environment Variables

During builds, you often need different configurations across environments (e.g., development vs. production). Angular CLI supports environment-specific variables out of the box—via files under src/environments/, such as environment.ts (for development) and environment.prod.ts (for production).

In your TypeScript code, access environment variables like this:

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

console.log(environment.apiUrl);

Post-Build Testing

After building, it’s essential to verify that your application functions correctly in a production-like setting. A simple static HTTP server is ideal for quick validation. For instance, use http-server:

npm install -g http-server
cd dist/your-app-name
http-server

Then open http://localhost:8080 in your browser to confirm everything renders and behaves as expected.

Automated Builds and CI/CD

To streamline and automate the build-and-deploy pipeline, integrate with CI/CD platforms such as GitHub Actions or GitLab CI. These tools can automatically trigger builds—and even deployments—whenever code is pushed to specific branches (e.g., main).

Below is a minimal GitHub Actions workflow that builds the project on every push to main and uploads the resulting artifacts:

name: CI

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      
      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'
      
      - name: Install dependencies
        run: npm install
      
      - name: Build project
        run: npm run build --prod
      
      - name: Upload artifacts
        uses: actions/upload-artifact@v2
        with:
          name: dist
          path: dist/

This workflow checks out the code, installs dependencies, executes the production build, and uploads the dist/ folder as a build artifact—laying the groundwork for subsequent deployment steps.

Summary

In this chapter, we thoroughly examined the Angular build and packaging process—including configuration options and practical examples demonstrating how to validate and prepare builds for production. Next, we’ll explore how to deploy these built artifacts to a live server—ensuring your application is accessible to end users. This final step plays a critical role in delivering a polished, high-performance user experience.