Image for post: How to deploy an Angular app to shared hosting

How to deploy an Angular app to shared hosting

15 November 2025 Estimated reading time: 3 minutes

Summary

Deploy your Angular app to shared hosting in three simple steps: run ng build --prod (or ng build in Angular 12+), modify the base href if needed, and upload the contents of the dist folder to your hosting provider. Your static Angular application will be ready to serve.

Introduction

Shared hosting remains a cost-effective solution for deploying Angular applications, especially for small to medium-sized projects. Unlike complex deployment pipelines, deploying to shared hosting is straightforward when your application doesn't require server-side dependencies. This guide walks you through the complete process using the Angular CLI.

Prerequisites

Before you begin, ensure you have:

  • Angular CLI installed on your development machine
  • A completed Angular application ready for deployment
  • Access to your shared hosting account (FTP/SFTP or file manager)
  • Basic understanding of Angular project structure

Step 1: build your Angular app for production

The Angular CLI provides a powerful build command that prepares your application for production deployment.

For Angular 12 and later

ng build

The production configuration is now the default build target in modern Angular versions.

For Angular 11 and earlier

ng build --prod

What happens during the build?

The production build process:

  • Compiles TypeScript code into optimized JavaScript
  • Bundles all files into efficient chunks
  • Minifies code to reduce file sizes
  • Tree-shakes unused code
  • Optimizes assets and images
  • Generates source maps (configurable)

After a successful build, you'll find a dist folder in your project root containing your production-ready application.

Step 2: Configure the base-href

The base href tells your Angular app where it's located on the server. This is crucial for proper routing and asset loading.

If deploying to root directory

If your app will be accessible at https://yourdomain.com, you can leave the default setting or explicitly set it during build:

ng build --base-href="/"

The index.html file should contain:

<base href="/">

If deploying to a subdirectory

If your app will be in a subdirectory like https://yourdomain.com/myapp/, you have two options:

Option 1: Set during build

ng build --base-href="/myapp/"

Option 2: Manually edit index.html

Open dist/your-app-name/index.html and modify the base tag:

<base href="/myapp/">

Important: Always include the trailing slash in the base href.

Step 3: upload files to shared hosting

  1. Navigate to your dist/your-app-name directory
  2. Select all files and folders inside this directory
  3. Upload them to your hosting provider using:
    • FTP/SFTP client (FileZilla, Cyberduck)
    • Hosting control panel file manager (cPanel, Plesk)
  4. Place files in the appropriate directory:
    • Root deployment: public_html or www
    • Subdirectory deployment: public_html/myapp

Troubleshooting common issues

Routing Issues (404 Errors on Refresh)

Angular uses client-side routing by default. When users refresh the page or access routes directly, the server looks for those files and returns 404 errors.

Solution: Configure your .htaccess file (for Apache servers):

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

For subdirectory deployments, update the RewriteBase accordingly:

RewriteBase /myapp/
RewriteRule . /myapp/index.html [L]

API and external resource issues

When your app consumes APIs or external resources:

  • Update API endpoint URLs for production environments
  • Use environment files (environment.prod.ts) to manage different configurations
  • Verify CORS settings if calling external APIs
  • Check that Firebase or other service configurations use production credentials

Assets not loading

If images, fonts, or other assets fail to load:

  • Verify the base href is correctly set
  • Check that asset paths in your code are relative
  • Ensure all files from the dist folder were uploaded
  • Clear browser cache and test in incognito mode

Blank white page

A blank page typically indicates:

  • JavaScript errors (check browser console)
  • Incorrect base href configuration
  • Missing or corrupted uploaded files
  • Server configuration blocking JavaScript execution

Alternative build optimizations

Further reduce bundle size:

ng build --optimization=true --build-optimizer=true

Generate a build report:

ng build --stats-json

Then analyze with:

npx webpack-bundle-analyzer dist/your-app-name/stats.json

Best practices

  • Test locally before deployment: Run ng serve --configuration production to test the production build locally
  • Use environment files: Separate development and production configurations
  • Enable gzip compression: Most shared hosting supports this for faster load times
  • Set up HTTPS: Use SSL certificates (often free with Let's Encrypt) for security
  • Monitor bundle sizes: Use ng build --stats-json and webpack-bundle-analyzer to optimize
  • Cache busting: Angular CLI handles this automatically with hashed filenames

Conclusion

Deploying an Angular application to shared hosting is a straightforward process that requires minimal configuration. By following this guide, you can have your Angular app live and accessible in minutes. Remember to test thoroughly, configure routing properly, and optimize your build for the best performance.

The simplicity and cost-effectiveness of shared hosting make it an excellent choice for Angular applications that don't require server-side rendering or complex backend infrastructure.