Ottenere la pagina 404 all'aggiornamento sul sito AngularJS?

Question

sto ottenendo un servito alla pagina 404 ogni volta che:

1.) rinfresco qualsiasi pagina del mio sito Angularjs (oltre alla pagina radice)

o

2 .) fare clic su Indietro per passare da una pagina 404 alla pagina radice (la pagina radice sarà un 404)

Ecco il mio codice .config()

'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: '/' 
     }); 
    }); 

Mi sono imbattuto in questa domanda simile, ma non capisco le risposte o come per la loro attuazione.

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

La risposta accettata dice di configurazione di Apache per riconfigurare tutti i percorsi alla radice. Il mio sito è su Github Pages. Ho un file .htaccess nel mio repository gh-pages ma non ho idea di come configurarlo per inviare tutti i percorsi alla radice.

La risposta dice un'altra cosa da considerare sta usando l'elemento <base> come <base href="/" /> ma dove lo posto? Nel mio index.html? Se è così all'inizio o alla fine di quel file? Inoltre, dovrei semplicemente lasciare il valore href a /?

Answer 1

mi sono imbattuto in una soluzione qui: https://coderwall.com/p/kfomwa

Ecco il breve post:

angularjs fornisce html5Mode, che rende il vostro URL pushState a base di utilizzo di app invece di hashtag. Tuttavia, ciò richiede il supporto lato server, dal momento che anche gli URL generati devono essere resi correttamente.

Questo in realtà funziona bene con le pagine 404 personalizzate delle pagine di Github, sebbene sia disponibile solo per le pagine abilitate per il dominio personalizzato.

Prima, copia tutto all'interno di index.html in 404.html. Poi, aggiungere questo alla vostra applicazione:

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

Si noti che se si è in angolare 1.1.5, assicurarsi che si imposta per html5Mode per funzionare correttamente.

Seguendo questi suggerimenti sono riuscito a far funzionare correttamente il mio sito. Ora quando premo Reload, la pagina si carica correttamente.

Answer 2

Le pagine Github servono solo file statici. Non leggerà le impostazioni di configurazione che hai per Apache in .htaccess.

Se si desidera eseguire un'app AngularJS fuori dalle pagine Github, non è possibile utilizzare html5Mode.

Answer 3

L'opzione migliore sarebbe quella di reindirizzare qualsiasi URL all'indice.html:

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

Questo NON causa una risposta 404 su nessuna pagina.

Answer 4

Sto eseguendo la mia applicazione angularjs utilizzando Nginx su Vagrant. E di fronte allo stesso tipo di problema. Ricaricando il browser con qualsiasi URL, mi dà una pagina 404.

Ho abilitato html5mode nel file js principale. Quando hai attivato html5Mode, il carattere # non verrà più utilizzato negli URL. Il simbolo # è utile perché non richiede alcuna configurazione lato server. Senza #, l'url sembra molto più bello, ma richiede anche modifiche laterali al server.

Qui sono alcune modifiche da fare:

• file di configurazione aperto nginx (nginx.conf) nella cartella /etc/nginx/sites-enabled (percorso può variare in base alla directory di installazione di nginx).
• Trova try_files $uri $uri/ =404; e sostituirlo con try_files $uri $uri/ /index.html;
• Salvare il file di configurazione di nginx
• Riavviare il nginx sudo service nginx restart

E ho cercato di ricaricare la pagina dopo aver fatto sopra modifiche. Funziona come previsto.