.htaccess - through - Obteniendo la página 404 en actualización en el sitio AngularJS?

angular route error 404

Question

Estoy recibiendo una página 404 cuando yo:

1.) actualice cualquier página en mi sitio Angularjs (además de la página raíz)

o

2.) haz clic en Atrás para ir de una página 404 a la página raíz (la página raíz será un 404)

Aquí está mi código .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: ''/''
});
});

Me he encontrado con una pregunta similar, pero no entiendo muy bien las respuestas ni cómo implementarlas.

AngularJS: por qué al cambiar la dirección url $ routeProvider no parece funcionar y recibo un error 404

La respuesta aceptada dice que configure Apache para reconfigurar todas las rutas a la raíz. Mi sitio está en Github Pages. Tengo un archivo .htaccess en mi repositorio gh-pages pero no tengo idea de cómo configurarlo para enviar todas las rutas a la raíz.

La respuesta dice que otra cosa a considerar es usar el elemento <base> como <base href="/" /> pero ¿dónde ubicaría eso? En mi index.html ? Si es así en la parte superior o inferior de ese archivo? Además, ¿dejaría el valor de href en / ?

Answer 1

Las páginas de Github solo sirven archivos estáticos. No leerá ninguna configuración de configuración que tenga para Apache en .htaccess.

Si desea ejecutar una aplicación AngularJS fuera de las páginas de Github, no puede usar html5Mode .

Answer 2

Encontré una solución aquí: https://coderwall.com/p/kfomwa

Aquí está la breve publicación:

angularjs proporciona html5Mode, que hace que su aplicación use URL basada en pushstate en lugar de hashtags. Sin embargo, esto requiere soporte del lado del servidor, ya que las URL generadas también se deben representar correctamente.

En realidad, esto funciona bien con las páginas 404 de las páginas github personalizadas, aunque solo está disponible para páginas habilitadas para dominios personalizados.

Primero, copia todo dentro de index.html a 404.html. Luego, agregue esto a su aplicación:

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

Tenga en cuenta que si está en angular 1.1.5, asegúrese de configurar el modo html5 para que funcione correctamente.

Siguiendo estas sugerencias, pude hacer que mi sitio funcionara correctamente. Ahora cuando pulso Recargar, la página se carga correctamente.

Answer 3

La mejor opción sería redirigir cualquier url al index.html:

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

Esto NO provocará una respuesta 404 en ninguna página.

Answer 4

Estoy ejecutando mi aplicación angularjs usando Nginx en Vagrant. Y enfrentando el tipo similar de problema. Al volver a cargar el navegador con cualquier url, me da una página 404.

He habilitado el modo html5 en el archivo js principal. Cuando haya habilitado html5Mode, el carácter # ya no se usará en sus URL. El símbolo # es útil porque no requiere configuración del lado del servidor. Sin # , la URL se ve mucho mejor, pero también requiere cambios en el servidor.

Aquí hay algunos cambios que hacer:

• Abra el archivo de configuración nginx ( nginx.conf ) en la nginx.conf /etc/nginx/sites-enabled (la ruta variará en función de su directorio de instalación de nginx).
• Encuentra try_files $uri $uri/ =404; y reemplázalo con try_files $uri $uri/ /index.html;
• Guarde el archivo de configuración nginx
• Reinicie el sudo service nginx restart

Y he intentado volver a cargar la página después de hacer los cambios anteriores. Funciona como se esperaba.