Angular Zero: Deploying to a Production Server

In this chapter, we will explore in detail how to deploy an Angular application to a server. In the previous chapter, we discussed how to build and package an Angular application to ensure optimal performance in production environments. Building upon those generated artifacts, this chapter explains how to publish them to a server so end users can access your application.

1. Preparing the Build Artifacts

First, ensure your application has been successfully built. This is typically done from the root directory of your project using the following command:

ng build --prod

This command generates a dist folder containing the built application files. The build process produces minified and optimized assets, ensuring faster loading times in production.

2. Deploying to a Static File Server

For most Angular applications—especially single-page applications (SPAs) built with ng build --prod—a static file server is sufficient for deployment. Here, we’ll use Nginx as an example.

2.1 Installing Nginx

On many Linux distributions, you can install Nginx using the following commands:

sudo apt update
sudo apt install nginx

After installation, start the Nginx service with:

sudo systemctl start nginx

2.2 Configuring Nginx

Next, configure Nginx to serve your Angular application’s files. Locate and edit the Nginx configuration file (typically at /etc/nginx/sites-available/default) and update it as follows:

server {
    listen 80;
    server_name your_domain.com;

    root /var/www/your-angular-app/dist;  # Replace this path with your actual path
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;  # Ensures Angular routing works correctly
    }

    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        access_log off;
        add_header Cache-Control "public, no-transform";
    }
}

Here, the root directive points to your build output directory, and the try_files directive ensures Angular’s client-side routing functions properly.

2.3 Copying the Build Files

Copy your built application files into the Nginx web root directory:

sudo cp -r dist/your-angular-app/* /var/www/your-angular-app/dist/

2.4 Restarting Nginx

After copying the files, restart Nginx to apply the changes:

sudo systemctl restart nginx

You should now be able to access your Angular application in a browser at http://your_domain.com.

3. Using Alternative Servers

Besides Nginx, you may choose other servers such as Apache or Node.js-based solutions. Below is a quick method using http-server for local testing:

3.1 Installing http-server

Ensure Node.js is installed, then install http-server globally via npm:

npm install -g http-server

3.2 Running http-server

Navigate to your built application directory and launch the server:

cd dist/your-angular-app
http-server -p 8080

You can now view your application at http://localhost:8080.

4. Addressing Common Deployment Issues

During deployment, you may encounter several common issues:

• Routing Issues: Directly accessing a sub-route (e.g., /dashboard) in the browser—rather than navigating there from the homepage—may result in a 404 error. This occurs because Nginx doesn’t natively handle Angular’s client-side routing. To resolve it, ensure the try_files directive is correctly configured (as shown above).

• Caching Issues: After updating your application, browsers may load stale assets from cache. Mitigate this by implementing versioned filenames (e.g., via Angular’s --output-hashing=all flag) or instructing users to clear their browser cache.

Conclusion

By following the steps outlined above, you should now be able to successfully deploy your Angular application to a server and make it publicly accessible over the internet. Depending on your infrastructure and requirements, you may opt for different servers or alternative deployment strategies. In the next chapter, we’ll introduce Angular Universal, enabling server-side rendering (SSR) to improve initial page-load performance and enhance SEO.