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
Related
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.
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"
So, I'm pretty new to AngularJS and I'm trying to use AngularJs ngRoute in my application.
It all works smoothly when I start at the application homepage:
http://localhost:8080/appName/
And when I click on links from this point it works smoothly.
However, when I type a URL that I know exists/works, it gives me a 404 error. If I go to that link by using the application instead of the url it loads fine, even though it has the same url.
Eg. http://localhost:8080/appName/search
will give a 404, even though that is the same url that is the default redirect.
Indeed, the only url that will load by typing in the location is the base URL I mentioned above.
My app.js looks like this:
app.config( ['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
$routeProvider
.when("/search", {
templateUrl: "search.html",
controller: "SearchController"
})
.when("/results", {
templateUrl: "results.html",
controller: "ResultsController"
})
.when("/browse", {
templateUrl: "browse.html",
controller: "BrowseController"
})
.otherwise({redirectTo:"/search"});
//This gets rid of the # on the urls to the templates
$locationProvider.html5Mode(true);
}]);
I am hosting this on a glassfish4 server.
Is there something obvious I am missing/misunderstanding about how ngRoute works? Is there some setting that I am missing?
All help appreciated...
EDIT 1: As #Matthew Green below says, I need to configure the webserver to return the index.html for all pages below
http://localhost:8080/appName
I know I am being completely dense here, but where abouts is this configured? I am hosting the code in a MAVEN Jersey-Quickstart-Webapp.
When you use ngRoute, you are using javascript to handle routing to create a SPA. That means you need to hit a real page that loads your routing for your application to know what page to route to.
For example, your http://localhost:8080/appName/ should be routing to your index.html which would contain the javascript for your routing. With that page loaded it knows how to handle the links you have in your application. However, if you were to go directly to http://localhost:8080/appName/pageName you also need that to load index.html, as it is the one that loads your routing. Once your routing is loaded it should direct you to the correct page in your application. Without redirecting in place, http://localhost:8080/appName/pageName is not a real page and therefore correctly returns a 404.
Knowing this, the thing you have to figure out is what kind of server setup you have to configure the appropriate redirects for everything under http://localhost:8080/appName/ to go to your index.html page.
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;
})
When enabling the html5Mode in AngularJS via $locationProvider.html5Mode(true), navigation seems to be skewed when you land on a page deeper in the site.
for example:
http://www.site.com
when i navigate to the root, i can click all links in the site, Angular's $routeProvider will take over navigating through the site and loading the correct views.
http://www.site.com/news/archive
but when i navigate to this url (or hit refresh when I'm on a deeplink like the above one...) this navigation is not working as I expect it to.
first of all, our as the Documentation for $locationProvider.html5Mode specifies, we catch all urls on the server, similar to the otherwise route in angular, and return the same html as the root domain. But if I then check the $location object from within the run function of angular, it tells me that http://www.site.com is my host and that /archive is my path. the $routeProvider arrives in the .otherwise() clause, since i only have /news/archive as a valid route. and the app does weird stuff.
Maybe the rewriting on the server needs to be done differently, or I need to specify stuff in angular, but currently i'm clueless as to why angular see's the path without the /news segment included.
example main.js:
// Create an application module
var App = angular.module('App', []);
App.config(['$routeProvider', '$locationProvider', function AppConfig($routeProvider, $locationProvider) {
$routeProvider
.when(
'/', {
redirectTo: '/home'
})
.when('/home', {
templateUrl: 'templates/home.html'
})
.when('/login', {
templateUrl: 'templates/login.html'
})
.when('/news', {
templateUrl: 'templates/news.html'
})
.when('/news/archive', {
templateUrl: 'templates/newsarchive.html'
})
// removed other routes ... *snip
.otherwise({
redirectTo: '/home'
}
);
// enable html5Mode for pushstate ('#'-less URLs)
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
}]);
// Initialize the application
App.run(['$location', function AppRun($location) {
debugger; // -->> here i debug the $location object to see what angular see's as URL
}]);
Edit
as per request, more details on the server side:
the server side is organised by the routing of zend framework, and it handles it's own routes (for serving data to the frontend on specific /api urls, and at the end, there is a catch-all route if no specific other route is bound, it serves the same html as the root-route.
so it basically serves the homepage html on that deeplinked route.
Update 2
after looking into the problem we noticed this routing works fine as it is, on Angular 1.0.7 stable, but shows the above described behaviour in the Angular 1.1.5 unstable.
I've checked the change-logs but haven't found anything useful so far, I guess we can either submit it as a bug, or unwanted behaviour linked to a certain change they did, or just wait and see if it get's fixed in the later to be released stable version.
Found out that there's no bug there.
Just add:
<base href="/" />
to your <head />.
This was the best solution I found after more time than I care to admit. Basically, add target="_self" to each link that you need to insure a page reload.
http://blog.panjiesw.com/posts/2013/09/angularjs-normal-links-with-html5mode/
This problem was due to the use of AngularJS 1.1.5 (which was unstable, and obviously had some bug or different implementation of the routing than it was in 1.0.7)
turning it back to 1.0.7 solved the problem instantly.
have tried the 1.2.0rc1 version, but have not finished testing as I had to rewrite some of the router functionality since they took it out of the core.
anyway, this problem is fixed when using AngularJS vs 1.0.7.
Configure AngularJS
$location / switching between html5 and hashbang mode / link rewriting
Configure your server:
https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#wiki-how-to-configure-your-server-to-work-with-html5mode
My problem solved with these :
1- Add this to your head :
<base href="/" />
2- Use this in app.config
$locationProvider.html5Mode(true);