1

I'm pretty new with AngularJS and server config stuff, and this is a problem I haven't found a satisfactory solution so far.

I would like to be able to use the HTML5 url on a website (without hashbangs), so that I could use addresses like "mydomain/contact" to navigate (I'll stick with the "contact" example for simplicity).

To do that, as I've found so far, one should do two things:

  • Enable HTML5 on the client side

Enable the HTML5 format on the app/app.js file (also adding the dependency) 

$locationProvider.html5Mode(true);

It makes possible to click on links and get the proper url. Still, it doesn't allow someone to access directly the HTML5 url. To get to the "contact" page, I still can't directly access "mydomain/contact" (we get a 404) and I know it makes sense. To solve this, it is still necessary to implement something server-side.

  • Server-side config

Configure the server to respond with the right file, i.e., I should configure the server to make it respond the same way when I request "mydomain/#/contact" and "mydomain/contact".

The last item is where I'm stuck. I've found many answers like this: "you should configure your server" (they assume the reader already knows how to do this. I don't), but I can't find a complete example on how to do that or where to put any needed files.

I'm using AngularJS 1.6.x and npm 3.10.9 (npm start). My question is: is there any complete example on how to fully use HTML5 urls with AngularJS?

Mateus Mendelson
  • 41
  • 7
  • Don't forget to include ```` tag in your ``index.html``. This assumes your app is being served from the root. If you are serving your app from a sub-folder, that needs to be reflected in the ````. – Vladimir Zdenek Jun 08 '17 at 07:47
  • I have an index.html on the root and all the views inside a "pages" folder. The use o doesn't solve the problem. – Mateus Mendelson Jun 12 '17 at 18:21

1 Answers1

0

The only problem that exists is that angular can't handle requests it doesn't receive. You need some catch-all so that all routes (/contact etc) are passed to your main index-file.

When you say .htaccess I assume apache. Even so I'd still put nginx in front of apache since it's lightweight and easy to configure (at least compared to the apache behemoth). Sorry, I know that is a very opinionated answer. Anyway with nginx the entire config could look like this:

# usually this file goes in /etc/nginx/conf.d/anyfilename.conf
# but it might vary with os/distro.
server {
  listen 80 
  root /var/www/myapp;

  location / {
    try_files $uri $uri/ index.html;
  }

  # And if you want to pass some route to apache:
  location /apache {
    proxy_pass http://127.0.0.1:81; # Apache listening on port 81.
  }
}

I'm sure the same can be achieved with apache alone, but I couldn't tell you how. But perhaps this can be of help: htaccess redirect for Angular routes

There are so many silly toolpacks and utilities I've wasted time learning in my life, but nginx is the one tool I'll never regret I picked up.

ippi
  • 9,857
  • 2
  • 39
  • 50