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"
Related
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
I am facing some weird type of behavior with spring boot + angular js while doing routing. Although routing is working but otherwise redirect to is not working.
For example:
if the url is http://localhost/admin/home#/analysis(working)
if the url is http://localhost/admin/home#/ (working)
but if the url is http://localhost/admin/home (not working)
I have configured otherwise but its not doing any benefit
Below is my code:
.config(['$routeProvider','$httpProvider',function ($routeProvider, $httpProvider) {
$routeProvider.when('/analysis', {
templateUrl : '../resources/views/includes/dashboard.html',
controller : "RegistrationController"
}).when('/', {
templateUrl : '../resources/views/includes/profile.html',
controller : "RegistrationController"
})
.otherwise({
redirectTo: '/'
});
$httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
}]);
I have placed in html
I would suggest you to take a look at $locationProvider.html5Mode(true).
It tells angularJS to use HTML5 strategy if available. Basically # is required for those browsers who do not support HTML5.
Also, you will be required to configure <base> tag of html.
Even when you will implement these concepts, you will stumble across another issue which I faced as well. If you navigate via href in the application, it would work , but if you copy the url and paste it directly in the browser, you'll get error as it would directly hit the server and will try to find necessary URL mapping on the server.
For more details, you can look at this this question which I asked for this issue
I hope it'll help.
Your problem is more related to SEO-related AngularJS implementation, basically, the solution to this is using the rewrite functionality of Apache or Nginx.
For more information, you can start here.
someone knows what "#!" Means. on the url?
I was working until then this appears,I had a "#" always in the url and would like to keep it that way.
Currently routing is not working anymore,probably because of this url change.
It's part of a business project, i don`t want to change to html5Mode.
I tried to use:
$locationProvider.hashPrefix("");
Even correcting the url in this way routing is having problems
Thats called hash-bang.
To fix this use :
angular.module('yourApp', [])
.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
Adding html5Mode would even get rid of the '#' in the url but if you refresh the page, then you would get a 404 error. This can be fixed by configuring your server a bit. For that you might want to check the nice little tutorials :
https://scotch.io/tutorials/pretty-urls-in-angularjs-removing-the-hashtag
https://www.theodo.fr/blog/2017/01/pretty-url-in-angularjs-and-loopback-drop-the/
There is another answer to the hashbang issue in stackoverlow :
Doing links like Twitter, Hash-Bang #! URL's
You can use html5Mode in your location provider.
$locationProvider.html5Mode(true);
more info https://scotch.io/tutorials/pretty-urls-in-angularjs-removing-the-hashtag
Set html5mode true in your app.config
$locationProvider.html5Mode(true).hashPrefix('*');
I have deployed angular app in tomcat7.
What did :
1 Made angular app as an html5 mode to true by adding fallowing code in app.js
if (window.history && window.history.pushState) {
$locationProvider.html5Mode(true);
};
2. Added `<base href="/dist/#/">` in index.html
2. Build the app by using grunt `grunt build`
3. Kept the dist into the folder `TOMCAT_HOME/webapp/ROOT`
Problem :
1. When i refresh the page it show 404
2. When I copy the URL and paste then also it's giving 404 error.
3. Provide me link for tomcat configurations
Note : If i hit the browser with Host/dist app is running (if i navigate state by state).
Please help me where i did mistake. And how to resolve it (with tomcat sever configuration if required).
URL's I fallowed :
Deploy AngularJS app on tomcat
http://diveintohtml5.info/examples/history/fer.html
Removing the fragment identifier from AngularJS urls (# symbol)
Not sure if you are still looking for the answer, but I will share my solution in case anyone needs it.
What I did was basically use http://tuckey.org/urlrewrite/
and set the rule as
<rule>
<from>^/search/$</from>
<to>index.html</to>
</rule>
I want to point out that I used the actual file name instead of the url I want to go.
Hope this helps!
Regards,
Berkan
I have an angularjs project that contains an oauth to github.
I use the satellizer plugin to deal with the oauth protocol.
Every time I try to connect I get this error:
Here is my route config (it's ES6 using Babel) :
export default function RouteConfig($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: './modules/default/default.html',
controller: 'DefaultController',
controllerAs: 'default'
})
.when('/auth/:provider',{
controller: 'OAuthController',
templateUrl: './modules/auth/auth.html',
})
.otherwise({
redirectTo: '/'
});
}
I tested the app using Postman, all the GET requests work fine but every POST request returns a 405.
I use live-server to host my angularJS application. I've read that the issue might be server-related. How can I solve that ?
I also use npm to deal with the packages.
**EDIT : ** I tried with simplehttpserver here is what I got:
well as it seems you do an http POST call somewhere in your application.
and you send this request to
http://localhost:8080/src/auth/callback
as it seems there is no server listening - or at least not to a POST request. probably you will have to find the http request in your code and check whether you're using the correct url for your request
I finally figured out. AngularJS cannot deal with POST requests, it's the server responsibility to do that, I forgot to start and add code for the server.
For those who will have the same issue than me, examples are here:
https://github.com/sahat/satellizer/tree/master/examples