How can you return status code 404 from angular PageNotFoundComponent?

Question

My understanding is that you can customize the not found page by setting { path: '**', component: PageNotFoundComponent } to RouterMoudle.forRoot(routes).

However it returns http status code 200. How can you return status code 404?

Answer 1

The simple answer to your question is Both Yes and No

it depends upon your scenario. There are two types of Angular Applications.

Client Side(Not Possible in this case)

A normal Angular application executes in the browser, rendering pages in the DOM in response to user actions

These applications adopt the normal approach where the whole application or a part of it(using lazy loading) is loaded inside the client browser. This application contains many small components. Navigation to these components is managed by Angular Router configurations.

Angular assigns paths to these components. Even the PageNotFoundComponent is actually a component and it's placed at the end of all the routes in case the URL doesn't matches any of the defined paths.

Since all of this is happening in client browser in Angular's own environment. So no HTTP request is made to the server.

When there is no request, there is no response

So you can't achieve the desired behavior.

SSR(Server Side Rendering)

There is another type of Angular applications in which the application is rendered from the server in form of static html instead of executing in client browser.

Angular Universal executes on the server, generating static application pages that later get bootstrapped on the client. This means that the application generally renders more quickly, giving users a chance to view the application layout before it becomes fully interactive.

In this case, every page of Angular Application is coming from server as a response of HTTP request.

So

it is possible to also send 404 status code when sending PageNotFoundComponent to the client.

The main reason why you would want to send a 404 error with your component is because search engines don't cache and index the pages with 404 status.

You can have a look at this helpful article which uses the SSR with Angular Universal to achieve this behavior.