How I Fixed the Azure DevOps ENOENT Error: Angular index.html Missing After Deployment

The deployment looked perfect.

No failed tasks. No warnings. Every stage in the Azure DevOps pipeline turned green. Naturally, I expected the application to load without any issues.

But when I opened the URL, I saw this instead:

ENOENT: no such file or directory, stat '.../dist/ko-hamsa-school/index.html'

This is one of those frustrating situations where everything appears successful — but the application is completely broken.

Understanding the Problem

This issue happened in an Angular application deployed through an Azure DevOps release pipeline with multiple environments like Dev, QA, and Production.

The pipeline completed successfully, but the server failed to find index.html, which meant the frontend never loaded.

At first, it looks like a server issue — but the real problem is in how the build output was deployed.

The Real Cause (Angular 18–20 Upgrade Scenario)

The issue started after upgrading Angular.

In Angular 18, 19, and 20, the build output can vary depending on configuration. In my case, the output was still generated directly inside the app folder without a browser/ directory.

Actual build output on the server:

dist/
└── ko-hamsa-school/
    ├── index.html
    ├── main-*.js
    ├── styles-*.css
    └── assets/

So the problem was not Angular itself — it was how the files were copied during deployment.

Why the Deployment Failed (Even Though It Succeeded)

The issue was caused by a small mistake in the pipeline configuration.

The working directory was set like this:

$(System.DefaultWorkingDirectory)/_Project/drop/browser

This caused only the contents of a non-existing or incorrect folder to be copied.

• Files were copied to the wrong location
• The expected folder structure was not preserved
• The server could not find index.html in the correct path

Step-by-Step Fix

1. Update the Working Directory

The issue happens because the working directory is pointing to the wrong location instead of the main build output folder.

Update the path from:

$(System.DefaultWorkingDirectory)/_Project/drop/browser

To:

$(System.DefaultWorkingDirectory)/_Project/drop

This ensures the correct build files — including index.html — are copied properly.

2. Fix the Deployment Script

rm -rf /home/azureadmin/webapps/schoolkohamsa.com/dist/ko-hamsa-school/*
cp -r * /home/azureadmin/webapps/schoolkohamsa.com/dist/ko-hamsa-school/
cd /home/azureadmin/webapps/schoolkohamsa.com/server/
pm2 restart your-app

This ensures all build files are copied correctly.

3. Verify on the Server

ls dist/ko-hamsa-school/

You should see:

index.html
main-*.js
styles-*.css

Final Result

After fixing the working directory and deployment path, the application loaded perfectly — no errors, no blank screen.

Final Thoughts

This issue is common after Angular upgrades, especially in Angular 18–20.

It’s not a pipeline failure — it’s simply a mismatch between your deployment configuration and the actual build output.

Once you correct the working directory and deployment path, everything works as expected.

A small fix — but it can save hours of debugging.