By shahidfoy
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!
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.
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.
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:
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.
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/">
).
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.
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
.
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.
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
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
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
Full documentation for every DigitalOcean product.
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.
New accounts only. By submitting your email you agree to our Privacy Policy
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.