I try to add a 404 page into my angularjs project which is hosted on firebase servers. I created a custom 404 page and added following code:
function routeConfig($stateProvider, $urlRouterProvider, $locationProvider)
{
$urlRouterProvider.otherwise('/pages/errors/error-404');
}
Now it works but I am missing something because when I check in the browser's network panel the status code is "200" but it should be "404".
What should I do for that?
$urlRouterProvider.otherwise just guides AngularJS that which URL it should navigate to when no URL matches the provider's rules.
This doesn't signify that a resource is not found on the server (which essentially returns 404). To do that, you need to do a lot more including serving this 404 page from the server with 404 as the status code.
Here is a resource to point you in the right direction:
AngularJS UI router handling 404s
Related
I have a SPA made with React JS on a S3 Bucket and I’m using Cloud Front to work through HTTPS and with a custom domain. When I refresh the page - if I have another Route that is not the BASE_URL (for example domain.com/something), S3 sends me a 404 error.
I also tried redirecting the error page to BASE_URL but it doesn’t work, it redirects me to the Http default domain that S3 provides me and again, it gives me an 404 error page.
I don’t know if there exists an alternative way to keep the URL without any change (domain.com/page) and avoid the 404 error the way a web server (apache) handles.
If you are using CloudFront to host s3 website, the effective way to get rid of 404 on reload of non-index route like www.google.com/about or similar non / is by the following steps:
Go to your CloudFront distribution
Go to Error Pages
Create a new error page with the following params:
HTTP Error Code: 404
TTL: 0
Custom Error Response: Yes
Response Page Path: /index.html
HTTP Response Code: 200
enjoy
credits going to this article https://gist.github.com/bradwestfall/b5b0e450015dbc9b4e56e5f398df48ff
You have two options. Either use CloudFront error page as a catch-all that redirects to / (you mentioned you tried setting an error page but did not detail what you did. This should work). The downside is that it will respond with the HTML page for all not found paths, even for mistyped CSS paths, for example.
The other solution is to use Lambda#Edge to rewrite the origin request path. This is a more customizable solution and you can define which paths you want to redirect to the root.
I can go to my root route, navigate using links within the app, but when I go directly to or refresh a non-root route (in production only) I get the following error:
Failed to load resource: the server responded with a status of 404 (Not Found)
I have a project set up with ReactRouter v5.0.1.
I am using BrowserRouter wrapper, I don't want to use HashRouter because of URLs looking nice.
When I refresh or go to a path that is not a root route (eg: ____/user/article):
in local, it works as expected
in production (Heroku), it gives a Cannot get /user/article
I have looked up the issue and the solutions I found were to change my webpack.js:
add historyApiFallback: true to devServer
add publicPath:'/' to output
These have been unable to solve my issue.
My frontend client is inside my nodejs "app" where the built files are served up by an express server. Maybe this may affect my refresh?
Help would be greatly appreciated...
This is a client vs server side routing issue. When navigating around on front end, it's all client side routing. But when you refresh the page, it does a request to the back end with that route. So in your express server, you need a catch all route, defined after all other routes, that redirects them to the root path /, e.g.
app.get('*', function(req, res) { /* redirect to / here */ });
There's a bunch of posts about this already if you want some more in depth exploration of the issue, like this one
I have an angular app that uses routes, where it has .otherwise(){} in routes.js file and now I need to make custom error pages using nginx, how to stop the .otherwise(){} and use the error pages defined on nginx default file, Anyone Please help I'm working on it from 5hrs. Or point me to any link that explains and solves this problem.
"Otherwise" in the routing is looking for a client side route. You can probably direct otherwise to a separate route on the client side with a controller that automatically redirects to a server route.
.otherwise('/ControllerThatSendsToServer');
Then in the ControllerThatSendsToServer just do a window.location = 'server error page';
I have used gulp to build my client angularJS application. After i deployed into IIS i'm getting an issue. My page is working fine when navigate through menu's. But when i refresh by page (or) copy and paste the URL its giving me 404 error.
HTTP Error 404.0 - Not Found
can anyone help me, to resolved this?
Use the otherwise method, which is the default route when none of the others get a match
Did you configured otherwise option in your route config section?
like this below?
app.config(function($routeProvider) {
$routeProvider.otherwise({
templateUrl : "main.htm",
controller : "mainController"
});
});
You can test it under this link
https://www.w3schools.com/angular/tryit.asp?filename=try_ng_routing_otherwise
I hope you can solve your issue by this below discussion
Refreshing page gives "Page not found"
I'm using $routeProvider and $locationProvider to handle pushstate URLS in a single page app (SPA), something like this:
angular.module('pets', [])
.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when('/pet/:petId', {
controller: 'petController'
});
})
.controller('petController', function($scope, petService, $routeParams){
petService.get('/api/pets/' + $routeParams.petId).success(function(data) {
$scope.pet = data;
});
});
The URL is used to pull content from the server which may or may not exist.
If this was an ordinary multipage website, a request for missing content would trigger a 404 header response from the server, and a request for moved content would trigger a 301. This would alert Google to the missing or moved content.
Say for example I hit a URL like this:
http://example.com/pet/123456
and say there is no such pet in the database, how can my SPA return a 404 on that content.
Failing this, is there some other way to correctly alert the user or search engine that the requested URL doesn't exist? Is there some other solution I'm not considering?
The real question is does http://example.com/pet/123456 return anything at all?
If your starting point is http://example.com/ and there's a link to http://example.com/pet/123456 then Angular will call the petController which in turn makes an AJAX call to http://example.com/api/pet/123456.
A crawler wouldn't do that but instead would try to call http://example.com/pet/123456 directly.
So your server must be able to handle that call. If there is no pet with the id 123456 then it should return 404. Problem solved. If there is then it should return the SPA. The application should then handle the situation accordingly.
According to this answer How do search engines deal with AngularJS applications?, You should use Headless Browser to process crawlers requests, and serve back snapshots of the page with the appropriate Response Code. https://developers.google.com/webmasters/ajax-crawling/docs/html-snapshot
The google example did not include 301,302 or 404 cases. However, their code could be modified to analyze the content of the snapshot and change the response code.
I found prerender.io offers this service, but it is not free. However, they have a free plan if you have fewer than 250 pages. Prerender asks that in case of 404 or 301, you add a meta tag to the DOM.
<meta name="prerender-status-code" content="404">
this meta tag is then detected by their headless browser and the response code is changed.
Try this
angular.module('pets', [])
.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when('/pet/:petId', {
controller: 'petController'
}). otherwise({ yourUrl:'/404.html'}) // Render 404 view;
})