I am working at a SPA using Flask(with jinja) and AngularJS. Everything works fine, but when the application is in a given state and I try to refresh the page in browser, the server responds with 404 response: "error": "Not found". Is there a way to make this work in a proper way when trying to access a page of the SPA application through the URL?
This may depend on how your dev http server is setup:
It should be set to always load the default page which is index.html such that the angular engine will load and run and only then it will serve the other routes (states) like localhost/state, otherwise the angular router would not be able to resolve the url since it is not loaded (letting the http server handle the request, serving a 404 Page Not Found)
The http servers sometimes serve only one level deep url's like localhost/state, not localhost/state/param and you need to change some settings to make it work, but I think this is beyond the scope of your question :)
You can use a hasher in SPA. You need to parse hash string before initializing view model and based upon the value of hash set your current visible page and then bind the view mode.
You need to have a rule to always return your SPA index.html page for any routes that match your angular routes. I'm not sure what your web server is, apache or nginx or whatever but you should be able to find instructions on how to match those requests back to index.html.
You must have enabled html5 mode to true in in your angular js app. Set that to false will solve your problem.
Related
We created a react js application.
Problem: Not able to hit react URL from the postman to run component's function.
local URL: http://localhost:3000/rules/routine
Note: Above URL can be reached without login.
When we are calling a url from browser it's working however when we hit from a postman then it always returns public/index.html page but not the expected response.
So it is not calling the proper url http://localhost:3000/rules/routine.
Please find attached screenshots on below links
browser hit: https://prnt.sc/73gDWh4PiHgu
Postman hit: https://prnt.sc/fhVL78yaiATP
It's technically possible, and working it seems, but I suspect your expectations are a little skewed in what you think Postman will do or is capable of.
Keep in mind that all React apps are effectively a single page app, even when they use a routing/navigation package like react-router. react-router is only manipulating the URL in the address bar in the browser window, the app is still running from the single location on a server where it's hosted, i.e. public/index.html.
The servers hosting the app are configured to route all page requests, i.e. "http://localhost:3000/rules/routine" to the root index file, i.e. "http://localhost:3000/index.html" so the React app is loaded and can handle the "/rules/routine" internally.
So from what I see here, the response from Postman is absolutely correct and what I'd expect to see. It made a request to the development server for a nested directory "/rules/routing" and the server responded with the root index.html file. When the browser makes this request to the development server and gets a HTML file back it loads and renders it, and in this case, it's your React app.
Postman isn't a browser so it's not going to load the HTML response and do anything with it.
How to use $stateprovider without # in URL?
If we use $locationprovider.html5mode(true) then first time it was loading correctly but after refreshing the page the state is not loading and error is displaying.
I will explain you the scenario. We are using ASP.NET web api as back end server and front end is purely HTML application with angular.JS . we are not facing any issues with backend server. we don't have issues with api calls. I will explain with a example: www.test.com/#/main/home is redirecting to www.test.com/main/home using $state.go and rendering the view perfectly. But after redirecting to www.test.com/main/home if we refresh the page we are getting 404 error. Please help out
I am looking for to provide URL as per use choice. So I need to eliminate the # for that.
The problem with html5mode(true) and page reload is that in HTML 5 mode the browser sends the full URL to the server when a page reload is triggered. And if the resource of the full URL does not exist on the server, an error is returned.
So to fix your problem, you need to add a rule on the server to always send the same .html file no matter what URL is called.
The $stateprovider will then initialize the client side state accordingly.
You need to re-write the url with .htaccess
Check this link out:
https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode
How to setup maintenance page when my application runing in production and value should be in Boolean so that we switch modes from maintenance to normal and vice versa in angular js
Using route concept
We did it this way:
I created a normal HTML page and changed my gruntfile, that this file will not be minified.
After that, we did the configurations for showing this Error or Maintanance sites via Load Balancer.
A other possible solution for that, is to create a interceptor like shown here
https://docs.angularjs.org/api/ng/service/$http#interceptors
At this interceptor you could call the Maintanance Page if a specific statuscode is sent by the server. If you create a http interceptor, each request to the backend will go through it.
I was trying to preetify my URL in angular js app and remove the hash. What I did was added in line in my app.config function:
$locationProvider.html5Mode(true);
But this issues I am still facing are:
If I open a page like this $window.location.href = '#/sales'; the slash is encoded and page does not opens.
If I directly type in my browser localhost:9000/sales without hash the page does not opens.
Can someone please help.
To add to it, my base url is: http://localhost:9000
You should choose just one option: either you have hashes in the url, or not.
If hashes are ok - then just remove $locationProvider.html5Mode(true); from your code.
If you really want your app to work w/o hashes in the url then follow this (probably incomplete) checklist:
Remove # from any urls on your page
Configure your web-server to feed the same webapp on all requests which your webapp recognizes. I.e. If your webapp routing knows what to do when user agent is requesting /sales - then make sure that your web-server or backend platform you are using serves the page with your web-app
I'm getting really frustrated with configuring the Routing on our app, which is using sailsJS and angularJS.
The problem is, that the browser doesn't know about angular, so any request like /login returns a 404 Error from sails. I need a solution, to keep the sails routes from the angular ones,
One solution would be to disable html5Mode, but i really don't like the look of URLs with the /#/ which is typical for angular.
I have researched a lot on this and haven't yet found a good answer or maybe a working project for this.
Is what I am trying to do even possible right now?
If you're using HTML5 mode with Angular, then you need to configure your web server (in this case SailsJS) to respond with your index.html file for requests to /login or any arbitrary routes.
If you navigate directly to http://localhost:3000/login in your web browser (assuming you're running Sails on localhost:3000), Sails needs to respond with your index.html so that your Angular app can bootstrap and then display the appropriate route. Then, subsequent links that the user clicks on in your app will be intercepted directly by the Angular router instead of Sails directly.
Angular has documentation about making HTML5 mode work correctly here.
Using this mode requires URL rewriting on server side, basically you have to rewrite all your links to entry point of your application (e.g. index.html). Requiring a <base> tag is also important for this case, as it allows Angular to differentiate between the part of the url that is the application base and the path that should be handeled by the application.