How to Deploy Angular 18 & 19 Applications on cPanel Hosting: Complete Developer Guide

Before you start: This guide is split into separate sections per Angular version and deployment type. Jump directly to the section that matches your setup. If you need the original official reference, Namecheap also maintains a deployment guide at namecheap.com/support/knowledgebase.

Step 0 — Find Your Angular Version

Not sure which Angular version you're on? Run this in your project directory:

...

Look for the line that says Angular: in the output. Example:

...

Also note your Node.js version:

...

You'll need both numbers before continuing.

Step 1 — Prerequisites & Node.js Compatibility

Install Angular CLI (if not already installed)

...

Verify it worked:

...

Node.js Version Requirements

Different Angular versions require different minimum Node.js versions. Your local Node.js must match what's available on your cPanel server. Mismatches cause broken builds or failed npm install on the server.

How to check your cPanel's available Node.js versions:

1. Log into cPanel
2. Search for Setup Node.js App
3. Click + CREATE APPLICATION
4. Open the Node.js version dropdown and note which versions are listed

If your local version doesn't match, use nvm to switch:

Install nvm (macOS / Linux)

...

Install and use the matching version

...

Confirm

...

For Windows, use nvm-windows.

Ensure node_modules is present

...

Check your app works locally before deploying

...

Visit http://localhost:4200. If it loads without errors, you're ready to build.

Choosing Your Deployment Path

What rendering type are you using?

Does your project have SSR / Server-Side Rendering?
│
├─ NO → You have a standard CSR app
│ → Follow: Path A (works for all Angular versions)
│
└─ YES → What Angular version?
│
├─ Angular 16 → Follow: Path B
├─ Angular 17 or 18 → Follow: Path C
└─ Angular 19 → Follow: Path D

How to tell if your project uses SSR:

Check if @angular/ssr or @nguniversal is in your dependencies

...

If the command returns a line, you're using SSR. If nothing prints, you have a CSR app.

Path A — CSR (Client-Side Rendering) — Works for All Angular Versions

Use this path if your app does not use Server-Side Rendering. This is the simplest deployment — just static files served via Apache.

A1. Build for Production

...

This creates a dist/ folder in your project root. The structure will be either:

Angular 16 and below

dist/your-app-name/
├── index.html
├── main.abc123.js
├── styles.def456.css
└── assets/

Angular 17 and above

dist/your-app-name/browser/
├── index.html
├── main.abc123.js
├── styles.def456.css
└── assets/

Note for Angular 17+: The files you upload are inside the browser/ subfolder, not the root dist/ folder.

Make sure there are no errors during the build. If errors appear, fix them before continuing.

You can change the output path in angular.json:

...

A2. Upload Files to cPanel

What to upload:

Upload the contents of the build folder (not the folder itself) to your domain's root directory in cPanel:

• For main domain → upload to public_html/
• For addon domain → upload to its root folder
• For subdomain → upload to its assigned folder

Via File Manager:

1. Log into cPanel
2. Go to Domains → Domains menu → find your domain → click its root folder
3. Click Upload in the top menu
4. Compress your build output into a .zip first, upload the zip, then right-click → Extract

Via FTP (FileZilla or similar):

• Host: ftp.yourdomain.com (or your server's IP)
• Username: your cPanel username
• Password: your cPanel password
• Port: 21 (FTP) or 22 (SFTP)

Connect, navigate to public_html/, and drag the files across.

Do NOT upload: node_modules/, .git/, README.md, .gitignore, source .ts files, or .env files.

A3. Create the .htaccess File

This is the most important step for CSR apps. Without it, any route other than / will return a 404 error.

In cPanel File Manager:

1. Navigate to your domain's root folder (where you uploaded files)
2. Go to Settings → enable Show Hidden Files (dotfiles)
3. Click + File, name it .htaccess, click Create New File
4. Right-click the file → Edit
5. Paste this content:

...

1. Click Save Changes and close the editor

If your app is in a subfolder (e.g. yourdomain.com/myapp/), change RewriteBase / to RewriteBase /myapp/.

See the official Namecheap video guide on editing the .htaccess file if you get stuck here.

A4. Test Your Deployment

Open a new browser tab and visit your domain. Your Angular app should load. Try navigating to a deep route like /about or /contact directly in the URL bar — if it works, the .htaccess is set up correctly.

✅ Done! CSR deployment complete.

Path B — SSR/SSG: Angular 16 (Universal)

Only follow this path if you are on Angular 16. If you're on Angular 17 or higher, skip to Path C or Path D.

Angular 16 uses @nguniversal/express-engine and a server.ts file. The setup on cPanel requires a small modification to server.ts to work with Apache Passenger.

B1. Modify server.ts

Open server.ts in your project root. Find this function and replace it:

Remove this (old code):

...

Replace with this (new code):

...

Then find this block lower in the file:

Remove this:

...

Replace with:

...

B2. Build the SSR App

...

This creates two output folders inside dist/your-app-name/:

dist/your-app-name/
├── browser/ ← static files served to the client
└── server/ ← Node.js server code

Make sure there are no build errors before continuing.

You can change the output path in angular.json:

...

B3. Prepare Files for Upload

Exclude these from your ZIP archive:

• node_modules/
• .git/
• README.md
• .gitignore

Include everything else — especially dist/, package.json, and package-lock.json.

Important: Do NOT use public_html/ as the upload destination for SSR apps on Namecheap. Create a separate directory for the app. The Node.js server cannot run from public_html/.

B4. Upload to cPanel

1. Log into cPanel → File Manager
2. Create a new directory outside public_html/ (e.g. /home/username/my-angular-app/)
3. Upload your ZIP there, then extract

B5. Set Up the Node.js App in cPanel

1. In cPanel, search for Setup Node.js App and open it
2. Click + CREATE APPLICATION
3. Fill in the settings:
4. Add any environment variables from your .env file if needed
5. Click CREATE
6. Stop the app temporarily
7. Go to Detected Configuration Files section
8. Click Run NPM Install
9. Click START APP

Visit your domain in a browser — your SSR app should be running.

✅ Done! Angular 16 SSR deployment complete.

Path C — SSR/SSG: Angular 17 & 18

Follow this path if you are on Angular 17 or 18. These versions use ng build instead of npm run build:ssr, and output a server.mjs startup file instead of main.js.

The key differences from Angular 16:

• No server.ts modifications needed
• Build command is just ng build
• Startup file is dist/your-app-name/server/server.mjs

C1. Build the App

...

Output structure:

dist/your-app-name/
├── browser/ ← static files
└── server/ ← Node.js server
└── server.mjs ← this is your startup file

Make sure there are no build errors.

You can customize the output path in angular.json:

...

C2. Prepare Files for Upload

Exclude the following from your upload ZIP:

• node_modules/
• .git/
• README.md
• .gitignore

Include everything else.

Important: Do NOT upload to public_html/ for SSR apps. Create a separate directory.

C3. Upload to cPanel

1. Log into cPanel → File Manager
2. Create a directory outside public_html/ (e.g. /home/username/my-angular-app/)
3. Upload your ZIP there, then extract

C4. Set Up the Node.js App in cPanel

1. In cPanel, open Setup Node.js App
2. Click + CREATE APPLICATION
3. Fill in the settings:
4. Add environment variables from your .env or .env.local file if applicable
5. Click CREATE

6. Stop the app temporarily

1. Navigate to Detected Configuration Files
2. Click Run NPM Install
3. Click START APP
4. Open your domain in a browser. Your Angular SSR app should load correctly.

✅ Done! Angular 17/18 SSR deployment complete.

Path D — SSR/SSG: Angular 19

Follow this path if you are on Angular 19. Angular 19 has SSR built-in with no extra packages needed, and it defaults to ES Modules (server.mjs).

D1. Ensure SSR is Configured

If you created your project with SSR enabled from the start, you're already set. If not, add it:

...

D2. Ensure ES Module Support in package.json

Angular 19 uses ES Modules by default. Add "type": "module" to your package.json if it's not already there:

...

D3. Build the App

...

Output structure:

dist/your-app-name/
├── browser/
│ ├── index.html
│ ├── main.abc123.js
│ └── assets/
└── server/
└── server.mjs ← startup file (ES Module format)

D4. Verify Server Startup File (Optional but Recommended)

Angular 19 auto-generates server.mjs. You can review or customize it. A typical minimal version looks like this:

...

D5. Prepare and Upload Files

Exclude from upload:

• node_modules/
• .git/
• README.md
• .gitignore

Important: Upload to a directory outside public_html/, not inside it.

1. Log into cPanel → File Manager
2. Create /home/username/my-angular-app/
3. Upload and extract your ZIP there

D6. Set Up the Node.js App in cPanel

1. Open Setup Node.js App in cPanel
2. Click + CREATE APPLICATION
3. Fill in the settings:
4. Add any environment variables needed
5. Click CREATE

6. Stop the app

1. Click Run NPM Install
2. Click START APP

Visit your domain. Angular 19 SSR app is live.

✅ Done! Angular 19 SSR deployment complete.

.htaccess Reference

For CSR apps (Path A) — All Angular versions

Place this in your domain's root folder:

...

For CSR app in a subfolder (e.g. yourdomain.com/app/)

...

With compression and caching (recommended for production)

...

GZIP Compression

...

Browser caching — JS and CSS files have hashed names so cache forever

...

Images cache for 1 year

...

cPanel Node.js App Setup Reference

This applies to Paths B, C, and D (all SSR deployments).

Key settings explained

Node.js version — must match the version you used locally. Check with node --version.

• Application mode — always set to Production for live deployments.
• Application root — the folder where you uploaded your project files. Should be outside public_html/. Example: /home/username/my-angular-app/
• Application URL — select the domain you want the app to run on.
• Application startup file — the path to your server entry point, relative to the Application root:

After creating the app

Always follow this order:

1. Stop the app
2. Go to Detected Configuration Files
3. Click Run NPM Install — this installs dependencies on the server
4. Click START APP

For more detail on working with Node.js apps in cPanel, see the Namecheap Node.js App guide.

Performance & Caching

Reduce bundle size with lazy loading

Load route components only when the user visits that route:

...

Use OnPush change detection (Angular 17+)

...

Analyze your bundle size

...

Target bundle size: under 500 KB for initial load.

Test performance after deploying

Use PageSpeed Insights with your live URL. Target scores above 85 for Performance, Accessibility, and Best Practices.

Troubleshooting

404 errors when navigating to any route other than /

Cause: .htaccess file is missing or not configured correctly.

Fix:

1. In cPanel File Manager, go to your domain's root folder
2. Settings → enable Show Hidden Files (dotfiles)
3. Confirm .htaccess exists
4. Open and verify the RewriteRule content matches the configuration above
5. Contact your host if mod_rewrite is disabled

Styles or images not loading — app looks unstyled

Cause: Wrong baseHref in angular.json.

Fix: If your app is at the domain root, baseHref should be /. If it's in a subfolder like /myapp/, set it to /myapp/.

...

Rebuild and re-upload after changing this.

Node.js app shows "Application is down" in cPanel

Fix steps:

1. Go to Setup Node.js App in cPanel
2. Click your app
3. Check the Detected Configuration Files section — look for error output
4. Common causes:

• Wrong startup file path: Double-check the table in the Node.js App Setup section
• Missing dependencies: Stop → Run NPM Install → Start
• Wrong Node.js version: Stop → change version → Run NPM Install → Start
• Angular 16 only: Confirm the server.ts modifications from Path B were applied before building

npm install fails on server — dependency errors

Cause: Your local Node.js version and cPanel's Node.js version don't match.

Fix: Check your cPanel's available Node.js versions, then use nvm locally to match:

...

Then re-upload and re-run NPM Install in cPanel.

app.server.module not found (Angular 16 specific)

Cause: Old @nguniversal package is not installed or the build script is wrong.

Fix:

...

Routes work on first load but break on page refresh (SSR apps)

Cause: The Node.js server isn't catching all routes and forwarding to Angular.

Fix: Make sure your server.ts (Angular 16) or server.mjs (Angular 17+) has a catch-all route handler:

...

Angular Version Comparison

Deployment Checklist

Before going live, verify:

• [ ] node --version locally matches what's in cPanel
• [ ] ng build completes with no errors
• [ ] Correct output folder uploaded (browser/ for Angular 17+, root dist/ for Angular 16 CSR)
• [ ] .htaccess created and saved in the domain root (CSR only)
• [ ] node_modules/ not uploaded — NPM Install run in cPanel instead
• [ ] Node.js startup file path matches your Angular version (see table above)
• [ ] Node.js app is running (green status in cPanel)
• [ ] All routes load correctly (test by visiting /about directly in the browser)
• [ ] Styles, images, and fonts load correctly
• [ ] HTTPS is enabled (use cPanel's free Let's Encrypt SSL)

*For the official Namecheap deployment reference, visit **namecheap.com/support/knowledgebase**.*