How to respond with 404 status on not found page on Angular?

Question

I have a "not found" component:

{
    path: '**',
    loadComponent: () =>
      import('./pages/not-found-page.component').then(
        (c) => c.PageNotFoundComponent,
      ),
}

How can I send the 404 status in the response, so Google doesn't show a soft 404 problem on my app?

Answer 1

Since Angular version 19, you can easily change the status code only on the server:

export class PageNotFoundComponent {
  private response = inject(RESPONSE_INIT);

  constructor() {
    // Only executes server-side
    if (this.response) {
      this.response.status = 404;
    }
  }
}

Check the docs for more reference