htaccess - El enrutamiento angular/enlace profundo no funciona con Apache 404

deploy angular in apache

Question

Estoy siguiendo los ejemplos de enrutamiento Angular 2. Utilizando el servidor web "lite" puedo navegar desde la raíz y funciona la vinculación profunda, pero usando Apache puedo navegar desde la raíz, pero obtengo errores 404 No encontrado al seguir enlaces directos a rutas.

Por ejemplo, la siguiente URL funciona contra el servidor web "lite" iniciado en el puerto 3000 por npm.

http://localhost:3000/crisis-center/2

Pero la siguiente URL contra Apache que se ejecuta en el puerto 80 falla.

http://localhost/crisis-center/2
The requested URL /crisis-center/2 was not found on this server.

Intenté algunas soluciones .htaccess recomendadas para problemas similares de Angular 1 pero no tuve suerte. Si alguien ha tenido un trabajo de enrutamiento y vinculación profunda de Angular 2 en Apache, hágamelo saber cómo lo logró.

@RouteConfig([
{ // Crisis Center child route
path: ''/crisis-center/...'',
name: ''CrisisCenter'',
component: CrisisCenterComponent,
useAsDefault: true
},

{path: ''/heroes'',   name: ''Heroes'',     component: HeroListComponent},
{path: ''/hero/:id'', name: ''HeroDetail'', component: HeroDetailComponent},
{path: ''/disaster'', name: ''Asteroid'', redirectTo: [''CrisisCenter'',  ''CrisisDetail'', {id:3}]}
])

Boot.ts

import {bootstrap}        from ''angular2/platform/browser'';
import {ROUTER_PROVIDERS} from ''angular2/router'';
import {AppComponent}     from ''./app.component'';
bootstrap(AppComponent, [ROUTER_PROVIDERS]);

Answer 1

Al actualizar la página, se produce un error 404 : Angular 6 :

1) Ponga el siguiente código en web.xml de su carpeta de implementación:

<error-page>
     <error-code>404</error-code>
     <location>/index.html</location>
</error-page>

Answer 2

Como la respuesta anterior realmente no responde la pregunta si desea que funcione con Apache. HashLocationStrategy sigue siendo una opción, pero si desea que funcione como está en Apache, debe hacer lo siguiente:

Cree un nuevo archivo .htaccess en la misma ubicación que su index.html . El siguiente código estará dentro:

<IfModule mod_rewrite.c>
  Options Indexes FollowSymLinks
  RewriteEngine On
  RewriteBase /crisis-center/
  RewriteRule ^index/.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . index.html [L]
</IfModule>

(Tenga en cuenta que en la pregunta <base href="/crises-center/"> dentro del index.html debe ser idéntico al RewriteBase)

Respuesta adaptada de la pregunta + respuesta del enrutamiento Angular 2 y acceso directo a una ruta específica: ¿cómo configurar Apache?

Answer 3

En httpd.conf o en apache2.conf agregue lo siguiente:

<Directory "/var/www/html/">
    Options FollowSymLinks
    Allow from all
    AllowOverride All
</Directory>

• Cambie "/ var / www / html /" a la ubicación de su sitio web

Y en .htaccess pegar:

RewriteEngine On
      # If an existing asset or directory is requested go to it as it is
      RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
      RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
      RewriteRule ^ - [L]
      # If the requested resource doesn''t exist, use index.html
RewriteRule ^ /index.html

Answer 4

Para angular4 / angular en app.routes.module.ts incluye useHash como se muestra a continuación,

@NgModule({
  imports: [RouterModule.forRoot(routes, {useHash: true})],
  exports: [RouterModule]
})

Answer 5

Para aquellos que se ejecutan en Apache, use este .htaccess

<IfModule mod_rewrite.c>
    RewriteEngine on
    RewriteCond %{REQUEST_FILENAME} -s [OR]
    RewriteCond %{REQUEST_FILENAME} -l [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^.*$ - [NC,L]

    RewriteRule ^(.*) /index.html [NC,L]
</IfModule>

Si aún recibe un error, ejecute esos 2 comandos:

sudo a2enmod rewrite
sudo systemctl restart apache2

Answer 6

Según la respuesta de Rein Baarsma, debe crear el archivo .htaccess y colocarlo en el mismo directorio que su index.html en su servidor Apache. Puede ser, por ejemplo, el directorio htdocs , pero esto depende de la configuración de Apache.

Sin embargo, utilizo contenido de archivo .htaccess diferente y funciona para mí para todos los enlaces / rutas sin necesidad de especificar la base de reescritura:

<IfModule mod_rewrite.c>
  Options Indexes FollowSymLinks
  RewriteEngine On
  RewriteRule ^index/.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Es una modificación del código proporcionado por Rein Baarsma.

Mi aplicación es una aplicación Angular 2+ (4.xx) basada en un proyecto angular-cli. Casi no depende de las URL directas a las direcciones proporcionadas por el enrutamiento angular. Sin el archivo .htaccess anterior, 404 not found después de hacer clic en cada enlace de URL directo. Ahora con el uso de este archivo .htaccess todo funciona bien.

Answer 7

Si está trabajando con la compilación iónica y carga su sitio en el servidor de alojamiento, entonces necesita agregar el archivo .htaccess en su directorio raíz dentro de la carpeta www .

    RewriteEngine on
    RewriteCond %{REQUEST_FILENAME} -s [OR]
    RewriteCond %{REQUEST_FILENAME} -l [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^.*$ - [NC,L]
    RewriteRule ^(.*) / [R=302,NC,L]

Answer 8

HashLocationStrategy hacer que su servidor maneje todas las rutas de regreso a index.html o use HashLocationStrategy

( HashLocationStrategy )

Echa un vistazo a:

¿Se rompe el enrutador de Angular 2 cuando se usan rutas HTML5?