Express + AngularJS html5mode when refreshed not working correctly - angularjs

I am working on building web apps with Express and AngularJS. The problem is I though I pretty well understood how to figure out html5 mode (avoiding hashbang on url for angular apps), but I didn't.
Right now for ordinary urls such as www.url.com/register, it works perfectly fine. Even if I refresh it it stays stable just okay.
However, for some url that has parameters such as 'www.url.com/user/1231231412414', when I refresh it, I see bare json data set.
I put router.get('*', {=}) stuff at the very end of the route script, and tried anything I can do, but I am totally stuck.
Is there anybody who know the solution and had gone through this problem? I would really appreciate for any help or advice for this problem. Thanks, guys.

Related

API fetching didn't work after I deployed

I deployed my React web work as a test at Vercel but the API didn't work and my web now is Empty..
my project and api works perfectly in my localhost !
some one knows why ?
my empty web :-
https://web-3-0-prokect-1.vercel.app/
api code in the useEffect hook:-
https://github.com/Adelndf/web.3.0-prokect-1/blob/master/src/App.js
by the way im new in coding so some of my coding words or terms might be little bit weird :)
hopefully someone understand my issue here
Your API request is not successful because of CORS error. This usually won't be an issue when you try in localhost. To learn more about CORS, click here.
I fixed it with the easy way cuz at the end its just a testing project..
the solution if any one needed it is :-
i added ( https://cors-anywhere.herokuapp.com/ ) before my api ulr and it works..
u can see it in github link at the top

Writing links in angular app when using Apache URL rewrites

I'm working on an angular app that is in a structure like this:
/dir1/dir2/myApp
There are rewrite rules in place, so that when someone comes from:
customURL/myApp
they hit my app. When I am in my local environment, the links that I use for routing just look like:
href="#/route"
and that all works fine, but when I hit the app from the custom URL, I end up on my index page and when I click one of the links, it reloads the page and takes me away from my custom URL structure and back to:
/dir1/dir2/myApp/#/route
I currently have fixed this by making all my hrefs look like this:
href="/myApp/#/route"
Then when I come in from the custom url and click a link, the url changes to this and there is no reload:
customUrl/myApp/#/route
That is the desired effect and it all works, but having to add that extra path in to every single href sort of feels wrong, and I'm wondering if there is a better way.
I have read through a lot of documentation and experimented with html5Mode, but this is the only way I have been able to achieve what I want.
If anyone with more experience with this has any tips or even thinks this is a perfectly good way of doing it, I'd really appreciate the feedback.
Thanks!
I would used ng-href="#/route"
very specific case, I can't reproduce on my machine,
so first of all do console.log($location) and see what your host is
if something what you expected, then just play around right href, try with and without '#' or '/'

AngularJS route stops working on a local port

I am using AngularJS to build a web app. I use ngRoute for routing and templating. I use gulp-serve to start my website locally. Once for few days it suddenly stops working. After I change local port it works ok.
For example: First it worked on port localhost:3000, but stopped and doesn`t work anymore
then the same with ports 3001,3002,3003,3004
Stopped working means it doesnt load template any more. If I try to access template file directly it is ok, but angular isnt loading it. In debug console there are no messages.
Can somebody explain how is it possible.
I guess I am not in a position to give you a 100% perfect explanation of this issue, but I am assuming that somewhere in your gulp-serve config the default to serve your app is set to port:3000. By attempting to reach the other ports you listed your app is not loading...
The problem was somewhere in cookies. After I clear cookie it goes ok. I use Auth0 service for logging. Maybe the problem is somewhere in their angularjs sdk.

Does Node.js Resolve AngularJs's problems rendering in non-Firefox browsers?

To my horror my AngularJS page only loads in Firefox and Android-Chrome. These are the two environments I've been testing on, and Angular breaks (literally) everything else. I think it's an issue with routing like this one but I'm trying to figure out if there's an easier way than mutating Apache to get it to work. Should I use Node? Or is there an easy solution on my LAMP stack?
Thank you!

Links not working with angular $location in HTML5 mode in a Rails 4.1 app

The biggest problem is that I even don't really know how to describe the problem I'm asking about. It's the first time in more then a decade of wed development.
I'm working on a Rails 4.1.1 app and using angularjs pretty extensively, though I don't know it well yet. And everything seemed to be working fine up to the moment when I tried to add some browser history manipulation to my app (e.g. changing the displayed url when listing though a paginated list so that that url can be copied and distributed). To do this I added a config to my app.
#app.config ($locationProvider) ->
$locationProvider.html5Mode(true)
And then in my angular controller added the $location binding like this
$scope.$watch 'pagination.cur', (newVal) ->
$scope.loadNews newVal
$location.path("/news").search({page:newVal})
(this is ment to change the url in the browser searchbox when the user goes from one page to another).
That workes well, the url does change appropriately, but all the sudden all the html links on the page got broken. I mean litteraly. I click any link on the page (even outside the controller div), the url in the serchbox changes appropriately, but the turbolinks toes not fire the Ajax request to get the new page content. If I then refresh the page, it loads the correct page.
I know it's really weird. What's weirder, that I don't get any JavaScript errors or anything unusual.
The only way I found to get the links working again - is to remove that initial config.
But when I do it, the $location falls back to hashtag syntax, wich is really not at all what I want.
My only assumption is that there could be some kind of a conflict between angular $location service and turbolinks when handling browser history, but even if that's right, I have no idea how to get around it. And I really need that kind of manipulation, 'cause I'm going to be using it alot in this and other apps.
I really don't know, what other information on this problem may be usefull, don't hasitate to ask for updates. I'll post whatever I can.
P.S. Btw, can this kind of manipulation be done by means of turbolinks? 'Cause it's exactly the same thing turbolinks does when changing the displayed url after page body reload, but I can't find any documentation on its public API for that.
UPDATE
Have no idea what's the source of the problem yet, but it seems to be not related to the turbolinks gem. Removing turbolinks requirements from the application.js file does not change anything.
Using $window.history.pushState instead of $location.path solves the functionality problem, but does not explain the initial bug.

Resources