How to deploy an Angular app to shared hosting

Created: 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

Navigate to your dist/your-app-name directory
Select all files and folders inside this directory
Upload them to your hosting provider using:
- FTP/SFTP client (FileZilla, Cyberduck)
- Hosting control panel file manager (cPanel, Plesk)
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.