Report this

What is the reason for this report?

Receiving 404 when routing to different pages for my angular application when using App Platform

Posted on August 11, 2025

Hi I am working on deploying my angular application to App Platform. The project was able to deploy successfully and the home page displays without issue but when I try to route to a different page I keep getting 404 errors. I think there is some kind of issues with DO routing and angular routing causing some conflicts is there any way to fix this?

here is the site I deployed: https://cyberchefai-ume5s.ondigitalocean.app/



This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

nevermind I was able to fix it by going to the App Platform https://cloud.digitalocean.com/apps

selecting my app selecting the settings tab then selecting my app in the Components: once in there I scrolled down to Custom Pages -> Edit select Catchall input Page Name: index.html

When deploying an Angular application on App Platform (or any similar platform), encountering a 404 error while routing to different pages is a common issue. This typically happens due to how Single Page Applications (SPA) like Angular handle routing versus how traditional server-side routing works.

Cause of the 404 Error:

Angular uses client-side routing to load different components or views based on the URL path. When you directly access a URL that Angular handles (e.g., example.com/products), the server on App Platform tries to locate a physical file or resource that matches the path. Since Angular is an SPA, those paths don’t correspond to physical files, leading to a 404 Not Found error.

How to Fix the 404 Error:

  1. Redirect All Routes to index.html: The server should always return the index.html file for any route, as Angular’s routing logic will handle the rest of the page rendering. To achieve this:

    • Configure your web server (whether it’s Nginx, Apache, or others) to serve the index.html for any route not matched by a static file.

    For example, in an Nginx configuration, you can add the following rewrite rule:

    location / { try_files $uri $uri/ /index.html; }

This ensures that any request for a non-existent file (like /products) gets redirected to index.html, allowing Angular’s router to take over.

  1. Ensure the Correct Base HREF in Angular: Make sure the <base href="/"> tag is set correctly in the index.html file. The base tag defines the root of the application for relative paths. If your app is hosted in a subdirectory, make sure to specify that path (e.g., <base href="/my-app/">).

  2. Check App Platform Settings: App Platform may have specific configuration settings or environment variables that affect how URLs are routed. Ensure that the platform is correctly set up to handle client-side routing and that it serves the app’s index.html for all routes.

  3. Use a Custom Rewrite Rule (if needed): If you’re using App Platform’s built-in server or custom Docker containers, you may need to create a custom rewrite rule or update your web server’s configuration to ensure that all requests are routed correctly to Angular’s index.html.

  4. Check Build and Deployment Settings: Ensure that your Angular app is correctly built and deployed. Sometimes, incorrect or incomplete deployment can cause issues like missing routing configurations or broken paths. Use ng build --prod to create a production-ready build and ensure it’s correctly uploaded to App Platform.

  5. Clear Cache/Use a Fresh Build: If you’ve recently changed routing configurations or base paths, try clearing the browser cache or re-deploying the application. Old cached routes or configurations can sometimes lead to routing errors.

https://devtechnosys.com/mobile-app-development.php

Key Steps to Address 404s in Angular Apps:

  • Configure Web Server to Redirect to index.html

  • Correct Base HREF in index.html

  • Use Rewrite Rules for SPA

  • Check App Platform Deployment Settings

  • Ensure Angular Build Is Production-Ready

  • Clear Cache and Re-deploy as Necessary

The developer cloud

Scale up as you grow — whether you're running one virtual machine or ten thousand.

Get started for free

Sign up and get $200 in credit for your first 60 days with DigitalOcean.*

*This promotional offer applies to new accounts only.