web-dev-qa-db-fra.com

Angular - L'URL / home demandée est introuvable sur ce serveur

Je vais être très bref.

J'ai un projet Angular avec un menu de navigation simple (routerLinks). Tout fonctionne comme il le devrait s'il est sur localhost, alimenté par angular cli.

Mais quand je le déploie sur un vrai serveur (je n'ai pas de VPS ou tout autre serveur, juste un dossier où je peux mettre mes fichiers), une chose étrange commence à se produire.

L'application est fonctionnelle, la navigation est fonctionnelle, le routage routeLinks, mais lorsque j'actualise un navigateur ou que j'essaye d'écrire quelque chose manuellement dans la ligne URL, chaque fois que j'obtiens 404 Not found. (donc je suis dans [domaine]/home - tout va bien, mais quand je rafraîchis le navigateur, j'ai 404/home introuvable.

Peut-être que je cherche un problème dans un mauvais endroit et ce n'est pas un problème de angular mais sur les requêtes HTTP (je ne sais pas grand-chose à ce sujet).

Avez-vous une idée par où commencer?

Merci, Pavel F.

le projet dont je parle: http://www.pavel-challenge.cz (non, ce n'est pas de la pub: D)

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { PassionsComponent } from './passions/passions.component';
import { QuestionComponent } from './question/question.component';
import { AboutComponent } from './about/about.component';
import { HomeComponent } from './home/home.component';
import { KnowledgeComponent } from './knowledge/knowledge.component';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'knowledge', component: KnowledgeComponent },
  { path: 'questions', component: QuestionComponent },
  { path: 'passions', component: PassionsComponent },
  { path: '**', redirectTo: '/home', pathMatch: 'full' }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

navbar.component.html

  <ul>
    <li><a routerLink="/about">About</a></li>
    <li><a routerLink="/knowledge">Knowledge</a></li>
    <li><a routerLink="/questions">Questions</a></li>
    <li><a routerLink="/passions">Passions</a></li>
  </ul>
angularurlhttp-status-code-404
10
Pavel Franta

FIXE: (pour le serveur HTTP Apache)

j'ai créé le fichier .htaccess et l'ai placé dans le dossier racine du côté du fournisseur.

.htaccess

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
24
Pavel Franta

Le problème réside dans la configuration de votre serveur HTTP.

vous devez faire toute l'URL après votre nom d'hôte pointant vers la ressource HTML incorporant votre application angular.

comme dans NGINX:

 location / {
       root <path to index.html>;
       try_files $uri  /index.html =404;
( if ressource exist serves it, likes images, else load index.html to load angular app )
    }

voici la documentation officielle

lors de la navigation après le chargement initial, le routeur angular prend la tête et affiche les données après un changement de position dynamique sans demande http.

Mais si vous chargez directement dans <...>/home, le serveur http essaie certainement de charger un fichier home.html, puis d'envoyer un 404.

3
Pierre Mallet

Check-out

https://angular.io/docs/ts/latest/guide/deployment.html

Il explique pourquoi votre serveur de production doit être configuré et propose un bon nombre d'exemples de configurations pour les serveurs courants.

0
Nofi

Dans le cas où vous déployez sur Apache, vous devez activer le module mod_rewrite:

réécriture Sudo a2enmod

Redémarrez ensuite Apache, Sudo systemctl restart Apache2

Après cela, faites les changements suggérés dans le .htaccess selon la réponse précédente

0
Aser Yehia