AngularJS html5 mode with nodeJS

Question

I have my NodeJS application running on port 11000 and AngularJS running on port 9000.

I am using HTML5 mode true in AngularJS and my URL's with #! and redirected to / using this mode. However, when I hit refresh, it gives 404.

I do have in my index.html.

As per the link: Angular ui-router pressing refresh causes 404 error. Before pressing the reload/refresh, the url works fine without the hashbang. When I manually add /#!/, it gets redirected to the right path.

The problem needs to be handled server side using app.use(*, callback) but since the server is running on port 11000, the request never really reaches there. Am I missing out on something fundamental here? I tried putting in the star wildcard for all routes in node js but that didn't help.

You should handle the request on `9000` port i.e. on which server `angular` application is running — Arun Redhu, Sep 09 '17 at 11:31
Of course, I have a route matching the route in ui-router. It works the first time but not on page reload. — systemdebt, Sep 09 '17 at 11:32
On which development server you are using it is webpack dev server or something else — Arun Redhu, Sep 09 '17 at 11:33
if you are using `grunt-dev server` then this should be handled there — Arun Redhu, Sep 09 '17 at 11:36
Basically, I used angular generator ; https://github.com/yeoman/generator-angular — systemdebt, Sep 09 '17 at 11:45
@ArunRedhu: Thank you for pointing it out :) I got it working by editing grunt file. Feel free to post your response as an answer so that I can accept. — systemdebt, Sep 09 '17 at 12:05
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/154035/discussion-between-arun-redhu-and-simran-kaur). — Arun Redhu, Sep 09 '17 at 16:01

score 1 · Accepted Answer · answered Sep 09 '17 at 16:00

Actually you are running two separate application one is on node server and another is on local 'grunt-dev server'. So in single page application routing is handled on client side js but when you refresh for a route then initially there is no js loaded to handle the routing and it makes a get request for the same to the server but there is no handling for the same so it gives 404. You have to do config in the grunt-file for handling the such routes.

AngularJS html5 mode with nodeJS

1 Answers1