Angular Application Returning 200 instead of 404

Kabir Singh

How to catch and show routing error header resonse, as i am 200 instead of 404 when redirecting to not found page. I want 404 header response when redirecting to not found page.

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Kabir Singh5y ago
Please respond to my query...
Kabir Singh5y ago
aap.get doesn't work in angular 9. My site is in angular 9.
Pranam Bhat5y ago
Solution 1:
// Wherever you want to return your standard 404 page
return Redirect("Home/StatusCode?code=404");
public class HomeController : Controller
{
// This method allows for other status codes as well
public IActionResult StatusCode(int? code)
{
// This method is invoked by Startup.cs >>> app.UseStatusCodePagesWithReExecute("/Home/StatusCode", "?code={0}");
if (code.HasValue)
{
// here is the trick
this.HttpContext.Response.StatusCode = code.Value;
}
//return a static file.
try
{
return File("~/" + code + ".html", "text/html");
}
catch (FileNotFoundException)
{
return Redirect("Home/StatusCode?code=404");
}
}
}
This does return 404.
Solution 2:
Create a Utilities class to return the 404 code and 404.html.
In the HomeController, I have the StatusCode IActionResult.
// This method is invoked by Startup.cs >>> app.UseStatusCodePagesWithReExecute("/Home/StatusCode", "?code={0}");
public IActionResult StatusCode(int? code)
{
// Call the static method
return Utilities.StatusCode(code: code.Value, this.HttpContext);
}
In Models, I've added a Utilities.cs.
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Http;
using System.IO;
namespace MediaMgt.Models
{
public static class Utilities
{
public static IActionResult StatusCode(int code, HttpContext httpContext)
{
// here is the trick
httpContext.Response.StatusCode = code;
//return a static file.
try
{
return new VirtualFileResult("~/" + code + ".html", "text/html");
}
catch (FileNotFoundException)
{
httpContext.Response.StatusCode = 404;
return new VirtualFileResult("~/404.html", "text/html");
}
}
}
}
The reason to do it like this instead of using the Redirect method is to avoid a round-trip to the client with a 302. This method returns both the 404 error code and a standard 404.html.
Sachin Singh5y ago
Angular is a SPA technology, for single-page applications, there is no meaning for status codes, everything is done via components and a component can't return HTTP status codes. Your navigation simply returns a component so you will always get 200 Ok.

But, I know for SEO purposes, setting a correct HttpStatus code is very important. for this, you can test this

//Modify below lines in server.ts as
app.get('*', (req, res) => {
res.render('index', {
req: req,
res: res,
providers: [
{
provide: REQUEST, useValue: (req)
},
{
provide: RESPONSE, useValue: (res)
}
]
});
});

// in your 404NotFound component

constructor(@Optional() @Inject(RESPONSE) private response: Response,
@Inject(PLATFORM_ID) private platformId: Object) {}

ngOnInit(){
if(isPlatformServer(this.platformId)){
this.response.status(404);
//or this.response.statusCode=404;
}
}