How to configure Angular/nginx routing with proper status codes

Question

I'm struggling to find any good documentation or guides on how to setup the routing in Angular and Nginx to support the following logic:

Route                            File       Status

example.com                   -> index.html 200 OK
example.com/path              -> index.html 200 OK
example.com/not-found         -> index.html 404 NOT FOUND
example.com/another-not-found -> index.html 404 NOT FOUND

Important points:

• Refreshing the page should give the same result
• Going to a path that doesn't exist should not redirect, it should give a 404 status code and show the 404 page.

Is there a way to do this? Any help would be much appreciated.

Answer 1

It seems it's not possible to make Angular work this way. Using the Angular docs as an example, they don't do it either.

Even though Google themselves says this is a bad practice: https://developers.google.com/search/docs/advanced/crawling/soft-404-errors

Fortunately it's not a massive issue as Google does try to recognize pages with a 200 status as a 404 as long as the content on the page makes it clear enough that it's actually a 404.

One SEO improvment can be seen in the Angular docs source code:

// Dynamically, pre-emptively, add `noindex`, which will be removed when the doc is ready and valid
const tag = document.createElement('meta');
tag.name = 'robots';
tag.content = 'noindex';
document.head.appendChild(tag);

This will add <meta name="robots" content="noindex"> to all pages. They then remove this tag once they know the page is valid (ie. not 404).