angularjs - html5mode ist kein Verhalten wie erwartet

Question

Ich versuche, HTML5Mode zu verwenden. Ich bin wie folgt aus:

Ich verwende 'base' Tag mit href Satz auf '/' in 'Kopf' Tag (kann nicht schreiben in HTML ...)

Und mein Haupt Modul behandelt Routen wie bei Gebrüll:

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...); 

wie man sehen kann ich versuchen zu verwenden ‚requireBase‘ gesetzt als ‚falsch‘ Hash in meinen Pfaden zu ignorieren, aber funktioniert nicht.

Meine nginx Konfigurationsdatei:

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/ 
    } 


} 

Das Verhalten:

Wenn ich auf so etwas wie: http://localhost

I '/ login' umgeleitet bin (wenn ich nicht angemeldet bin -im). Das ist ok!

Aber, wenn ich versuche, diese Seite ohne '#' neu zu laden, habe ich 404 Seite in meinem Gesicht. Warum?

Ich nehme an, dass ich etwas auf Nginx-Konfigurationsdatei (vielleicht ein Neuschreiben) tun muss. Habe ich recht oder kann ich das direkt auf AngularJS tun?

Danke!

Answer 1

Das passiert, weil wenn Sie die Anfrage an Ihren Server senden, es nicht weiß, dass die angeforderte Datei nicht existiert und das Routing innerhalb des Frontends stattfindet. Sie müssen Ihre .htaccess so ändern, dass alle Ihre Anforderungen an eine einzige Datei weitergeleitet werden.

RewriteEngine On 
Options FollowSymLinks 

RewriteBase/

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

Answer 2

vor Ort Sitzung in der nginx Konfigurationsdatei:

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

Das funktioniert! Aber ist nicht der beste Weg (eigentlich ist ein dummer Weg). Ich brauche eine bessere Lösung. Ich habe versucht mit Conditionals neu zu schreiben, aber Nginx 'schreien mich': D. Jemand anderes?