web-dev-qa-db-fra.com

Le routage angulaire/lien profond ne fonctionne pas avec Apache 404

Je suis les exemples de routage angulaires 2. En utilisant le serveur Web "lite", je peux naviguer à partir de la racine et des liens profonds, mais en utilisant Apache, je peux naviguer à partir de la racine, mais j'obtiens des erreurs 404 Introuvables en suivant des liens directs vers des itinéraires.

Par exemple, l'URL suivante fonctionne sur le serveur Web "lite" démarré sur le port 3000 par npm.

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

Mais la prochaine URL contre Apache s'exécutant sur le port 80 échoue.

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

J'ai essayé quelques solutions .htaccess recommandées pour des problèmes similaires avec Angular 1 mais pas de chance. Si quelqu'un a déjà effectué du routage angulaire 2 et des liens profonds sur Apache, faites-moi savoir comment vous y êtes parvenu.

@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]);
angularangular2-routing
25
Robert

Comme la réponse ci-dessus ne répond pas vraiment à la question si vous voulez que cela fonctionne avec Apache. HashLocationStrategy reste une option, mais si vous voulez que cela fonctionne tel quel sur Apache, vous devez procéder comme suit:

Créez un nouveau fichier .htaccess au même emplacement que votre index.html. Le code suivant sera à l'intérieur:

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

(Notez que dans la question le <base href="/crises-center/"> à l'intérieur du index.html doit être identique à celui de RewriteBase)

Réponse adaptée de la question + réponse de Routage angulaire 2 et accès direct à une route spécifique: comment configurer Apache?

45
Rein Baarsma

Pour ceux qui utilisent Apache, utilisez .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 vous obtenez toujours une erreur, exécutez ces 2 commandes:

Sudo a2enmod rewrite
Sudo systemctl restart Apache2
9
Playnox

Pour angular4/angular dans app.routes.module.ts, utilisez useHash comme ci-dessous,

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

Vous devez faire en sorte que votre serveur gère tous les itinéraires vers index.html ou utilisez HashLocationStrategy 

( https://angular.io/docs/ts/latest/api/common/index/HashLocationStrategy-class.html )

Jeter un coup d'œil à:

Le routeur d'Angular 2 est-il endommagé lors de l'utilisation d'itinéraires HTML5?

1
Langley

Selon Rein Baarsma, vous devez créer le fichier .htaccess et le placer dans le même répertoire que votre index.html sur votre serveur Apache. Il peut s’agir par exemple du répertoire htdocs, mais cela dépend de votre configuration Apache. 

Cependant, j'utilise un contenu de fichier .htaccess différent et cela fonctionne pour moi pour tous les liens/routes sans qu'il soit nécessaire de spécifier la base de réécriture:

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

C'est une modification de code fournie par Rein Baarsma.

Mon application est une application angulaire 2+ (4.x.x) basée sur le projet angular-cli. Cela dépend à peine des URL directes aux adresses fournies par le routage angulaire. Sans le fichier .htaccess ci-dessus, j'ai obtenu 404 not found après avoir cliqué sur chaque lien d'adresse URL directe. Maintenant, avec l'utilisation de ce fichier .htaccess, tout fonctionne correctement.

1
luke

De rafraîchir les résultats de la page en erreur 404 - Angular 6 :

1) Placez le code ci-dessous dans le fichier web.xml de votre dossier de déploiement:

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