404-Seite bei Aktualisierung auf AngularJS-Site erhalten?

Question

Ich erhalte eine der 404-Seite serviert, wann immer ich:

1.) jede Seite auf meiner AngularJS Website aktualisieren (neben der Stammseite)

oder

2 .) klicken Sie auf Zurück von einer 404-Seite auf die Root-Seite gehen (die Root-Seite wird eine 404 sein)

Hier ist mein .config() Code

'use strict'; 

angular.module('mmApp', ['ngResponsiveImages']) 
    .config(function ($locationProvider, $routeProvider) { 
    $locationProvider.html5Mode(true); 
    $locationProvider.hashPrefix = '!'; 
    $routeProvider 
     .when('/', { 
     templateUrl: '/views/design.html', 
     controller: 'MainCtrl' 
     }) 
     .when('/about', { 
     templateUrl: '/views/about.html', 
     controller: 'MainCtrl' 
     }) 
     .when('/contact', { 
     templateUrl: '/views/contact.html', 
     controller: 'MainCtrl' 
     })  
     .otherwise({ 
     redirectTo: '/' 
     }); 
    }); 

ich auf diese ähnliche Frage gekommen, aber nicht ganz verstehen, die Antworten oder wie sie umgesetzt werden.

AngularJS - Why when changing url address $routeProvider doesn't seem to work and I get a 404 error

Die akzeptierte Antwort sagt Setup Apache alle Pfade an die Wurzel zu rekonfigurieren. Meine Seite befindet sich auf Github Pages. Ich habe eine .htaccess Datei in meinem gh-pages Repo, aber ich habe keine Ahnung, wie man es konfiguriert, um alle Pfade an den Stamm zu senden.

Die Antwort sagt eine andere Sache zu prüfen ist mit dem <base> Element wie <base href="/" />, aber wo würde ich das platzieren? In meinem index.html? Wenn ja, am oberen oder unteren Ende dieser Datei? Würde ich auch den href Wert auf / belassen?

Answer 1

stieß ich auf eine Lösung hier: https://coderwall.com/p/kfomwa

Hier ist die kurze Beitrag:

AngularJS bietet html5Mode, die pushstate-basierte URL statt Hashtags App Verwendung macht. Dies erfordert jedoch serverseitige Unterstützung, da die generierten URLs ebenfalls ordnungsgemäß gerendert werden müssen.

Dies funktioniert tatsächlich mit den benutzerdefinierten 404-Seiten von github-Seiten, obwohl es nur für benutzerdefinierte domänenfähige Seiten verfügbar ist.

Zuerst kopieren Sie alles in index.html zu 404.html. Dann fügen Sie diese zu Ihrer App:

angular.module('app', []).config(function($locationProvider) { 
     $locationProvider.html5Mode(true); 
    }); 

Beachten Sie, wenn Sie auf Winkel 1.1.5 sind, stellen Sie sicher, dass Sie setzen für html5Mode richtig zu arbeiten.

Nach diesen Vorschlägen konnte ich meine Website richtig funktionieren. Wenn ich Reload jetzt drücke, wird die Seite korrekt geladen.

Answer 2

Github-Seiten dienen nur statischen Dateien. Es liest keine Konfigurationseinstellungen für Apache in .htaccess.

Wenn Sie eine AngularJS-Anwendung von Github-Seiten aus ausführen möchten, können Sie html5Mode nicht verwenden.

Answer 3

Die bessere Option wäre, jede URL zum Index umzuleiten.html:

RewriteEngine on 
RewriteCond %{REQUEST_FILENAME} !-f 
RewriteRule ^.*$ index.html 

Das wird KEINE 404-Antwort auf irgendeiner Seite verursachen.

Answer 4

Ich verwende meine angularjs Anwendung mit Nginx auf Vagrant. Und mit der gleichen Art von Problem konfrontiert. Nach dem Laden des Browsers mit einer beliebigen URL, gibt es mir eine 404-Seite.

Ich habe den HTML5-Modus in der Haupt-js-Datei aktiviert. Wenn Sie html5Mode aktiviert haben, wird das Zeichen nicht mehr in Ihren URLs verwendet. Das Symbol # ist nützlich, da es keine serverseitige Konfiguration erfordert. Ohne # sieht die URL viel schöner aus, erfordert aber auch serverseitige Änderungen.

Hier sind einige Änderungen zu tun:

• öffnen nginx-Konfigurationsdatei (nginx.conf) in /etc/nginx/sites-enabled Ordner (Pfad auf Ihrem nginx Installationsverzeichnis variieren basiert).
• try_files $uri $uri/ =404; Suchen und ersetzen Sie es mit try_files $uri $uri/ /index.html;
• die Datei nginx Konfiguration speichern
• Starten Sie den nginx sudo service nginx restart

Und ich habe versucht, die Seite neu zu laden nach oben Änderungen zu tun. Es funktioniert wie erwartet.