angularjs - html5mode is not behavior as expected

Question

I'm trying to use html5mode. I'm using like this:

I'm using 'base' tag with href set on '/' in 'head' tag(can't write this in HTML... )

And my main module are treating routes as at bellow:

angular.module('MyChef', [
    'Authentication',
    'Home',
    'UserArea',
    'ngRoute',
    'ngCookies'
])

.config(['$routeProvider', '$locationProvider', function ($routeProvider,$locationProvider) {

    $routeProvider
        .when('/login', {
            controller: 'LoginController',
            templateUrl: 'modules/authentication/views/login.html'
        })

        .when('/', {
            controller: 'HomeController',
            templateUrl: 'modules/home/views/home.html'
        })

        .when('/home', {
            controller: 'HomeController',
            templateUrl: 'modules/home/views/home.html'
        })


        .when('/user-area', {
            controller: 'UserAreaController',
            templateUrl: 'modules/user-area/views/user-area.html'
        })


        .otherwise({ redirectTo: '/' });

        $locationProvider.html5Mode({
                     enabled: true,
                     requireBase: false,
        });
}]).run(//doesn't matter I guess...);

As you can see I'm trying to use 'requireBase' set as 'false' to ignore hash in my paths, but is not working.

My nginx config file:

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    root /var/www/site/public;

    server_name mychefake.com.br;


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


  location /api {
    proxy_set_header Host $http_host;
    proxy_set_header X-Forwarded-Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
#    proxy_set_header X-Forwarded-Port 443; #this is important for Catalyst Apps!
      rewrite /api(.*) /$1  break;
    proxy_pass http://localhost:5000; #changed from http://localhost:5000/
  }


}

The behavior:

When I access something like: http://localhost

I'm redirected to '/login'(if I'm not logged-in). That's ok!

But, if I try to reload this page without '#', I have 404 page in my face. Why?

I suppose that I need to do something on nginx config file(maybe a rewrite). Am I right or can I do this directly on AngularJS ?

Thanks!

Answer 1

This happens because when you send the request to your server it does not know the file you are requesting does not exist and the routing is happening within the frontend. You have to modify your .htaccess so all your requests are routed to one single file.

RewriteEngine On
Options FollowSymLinks

RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /#/$1 [L]

Answer 2

on location session in the nginx config file:

 rewrite ^/login /#login redirect;
 rewrite ^/user-area /#user-area redirect;

This works! But is not the best way(actually is a stupid way). I need a better solution. I've tried with conditionals rewrite, but nginx are 'yelling me' :D . Someone else?