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

To deploy an Angular app, first run ng build --configuration production to create optimized static files in the dist/ folder. Then, upload these files to a web server or hosting service like Firebase Hosting, Netlify, or GitHub Pages to make your app live.

Syntax

The main command to prepare your Angular app for deployment is:

• ng build --configuration production: Builds the app in production mode, optimizing files for faster loading.
• The output is placed in the dist/ folder, ready to be served.

After building, you upload the contents of dist/ to your hosting platform.

bash

ng build --configuration production

Output

Generating ES5 bundles for differential loading...
✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

Initial Chunk Files | Names         | Raw Size
main.js           | main          | 1.23 MB
polyfills.js      | polyfills     | 130 KB
runtime.js        | runtime       | 6.5 KB
styles.css        | styles        | 15 KB

Build at: 2024-06-01T12:00:00.000Z

✔ Build complete.

Example

This example shows how to build an Angular app and deploy it to Firebase Hosting.

First, build the app with production optimizations. Then, initialize Firebase in your project and deploy.

bash

ng build --configuration production
firebase init hosting
firebase deploy

Output

✔  Firebase initialization complete.
✔  Hosting setup complete.
✔  Deploying to Firebase Hosting...
✔  Deploy complete!
Project Console: https://console.firebase.google.com/project/your-project-id/overview

Common Pitfalls

Some common mistakes when deploying Angular apps include:

• Uploading the entire project folder instead of only the dist/ folder contents.
• Not building with --configuration production, resulting in slower, larger files.
• Forgetting to configure the server to serve index.html for all routes (important for Angular routing).
• Not setting the baseHref correctly if deploying to a subfolder.

text

Wrong:
ng build
Upload entire project folder

Right:
ng build --configuration production
Upload only dist/your-app-name contents

Also, configure server to fallback to index.html for SPA routing.

Quick Reference

Summary tips for deploying Angular apps:

• Always use ng build --configuration production for optimized builds.
• Upload only the contents of the dist/ folder to your hosting.
• Configure your web server to serve index.html for all routes to support Angular routing.
• Use hosting services like Firebase Hosting, Netlify, or GitHub Pages for easy deployment.
• Set baseHref in angular.json if deploying to a subfolder.

Key Takeaways

Run ng build --configuration production to create optimized files for deployment.

Upload only the dist/ folder contents to your hosting platform.

Configure your server to serve index.html for all routes to enable Angular routing.

Use popular hosting services like Firebase Hosting or Netlify for easy deployment.

Set the baseHref correctly if your app is not hosted at the root URL.