web-dev-qa-db-fra.com

Comment acheminer en angulaire 4

J'ai un projet angulaire 4 et quand je l'exécute à partir de localhost:4200/route-a, cela fonctionne bien et lorsque j'actualise le navigateur, tout fonctionne correctement. Cependant, lorsque je le construis avec ng build et que je l'exécute à partir d'Apache, naviguer vers localhost/route-a renvoie un 404. Voici mon code pour le routage: 

imports: [BrowserModule, HttpModule, FormsModule, RouterModule.forRoot([
    { path: 'home', component: HomeComponent },
    { path: 'route-a', component: RouteAComponent },
    { path: '', redirectTo: '/home', pathMatch: 'full' }
  ])]
angularapacheangular4-router
7
Sam Ziggler

Ce n'est pas un problème Angular. C'est un problème avec vos paramètres Apache… .. Lorsque vous utilisez le mode HTML5 (joli URL) dans Angular, vous devrez configurer votre Apache pour envoyer toutes les demandes où la ressource n'existe pas sur le serveur à l'index. fichier html.

Cela peut être fait avec la configuration .htaccess suivante: 

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

La raison en est que lorsque vous essayez d'accéder à /route-a, le serveur Apache essaiera par défaut de trouver le répertoire route-a et le fichier index.html à l'intérieur. Mais comme vous n’avez pas ce répertoire, Apache renverra une erreur 404.

Mais en disant à Apache, que sur toute demande, l'emplacement ou le fichier n'existe pas. Pour envoyer votre fichier Angular html indsted, le routeur Angular le prendra à partir de là.

20
Doehl

À partir de la version 2.2.16 d'Apache, vous pouvez utiliser la directive FallbackResource pour cela:

<Directory "/var/www/my_blog">
  FallbackResource index.php
</Directory>

Vérifiez https://httpd.Apache.org/docs/trunk/rewrite/remapping.html#fallback-resource

2
Sameera roshan