How to Deploy Angular to Netlify: Step-by-Step Guide

To deploy an Angular app to Netlify, first build your app using ng build --prod to create static files in the dist/ folder. Then, connect your project to Netlify, set the build command to ng build --prod, and the publish directory to dist/your-app-name. Netlify will handle the deployment and hosting automatically.

Syntax

Deploying Angular to Netlify involves these key steps:

• Build Command: ng build --prod compiles your Angular app into static files optimized for production.
• Publish Directory: The folder where the built files are located, usually dist/your-app-name.
• Netlify Setup: Connect your Git repository or drag-and-drop your build folder to Netlify for deployment.

bash

ng build --prod

# Publish directory example:
dist/your-app-name

Example

This example shows how to deploy an Angular app named my-angular-app to Netlify using the CLI and Netlify UI.

1. Run ng build --prod to create the production build.
2. In Netlify, create a new site and connect your GitHub repository containing the Angular project.
3. Set the build command to ng build --prod.
4. Set the publish directory to dist/my-angular-app.
5. Click deploy and wait for Netlify to build and host your app.

bash

ng build --prod

# Netlify settings:
# Build command: ng build --prod
# Publish directory: dist/my-angular-app

Output

✔ Angular app built successfully
✔ Site deployed at https://your-site-name.netlify.app

Common Pitfalls

Common mistakes when deploying Angular to Netlify include:

• Setting the wrong publish directory (must be dist/your-app-name, not just dist).
• Forgetting to build the app before deployment.
• Not configuring the _redirects file for Angular routing, causing 404 errors on page refresh.

To fix routing issues, add a _redirects file in src/ with this content:

/* /index.html 200

plaintext

/* Redirect all routes to index.html for Angular routing */
/* /index.html 200

Quick Reference

Summary tips for deploying Angular to Netlify:

• Always run ng build --prod before deployment.
• Set the publish directory to the exact dist/your-app-name folder.
• Add a _redirects file with /* /index.html 200 to support Angular routing.
• Use Netlify's continuous deployment by connecting your Git repository.

Key Takeaways

Build your Angular app with 'ng build --prod' to generate static files.

Set Netlify's publish directory to 'dist/your-app-name' for correct deployment.

Add a '_redirects' file with '/\* /index.html 200' to fix routing issues.

Connect your Git repo to Netlify for automatic continuous deployment.

Double-check build commands and paths to avoid common deployment errors.