web-dev-qa-db-fra.com

404 Erreur lors de l'actualisation pour angular (v4 +) déployé sur le serveur Tomcat

J'ai déployé une application angular avec chargement paresseux. L'application fonctionne parfaitement lorsqu'elle est hébergée sur le domaine Github.io mais je reçois une erreur lorsque j'ai déployé l'application sur le serveur Tomcat à l'aide de mobaxterm. Lorsque la page recharge ou actualise l'application perd l'état de routage et génère une erreur 404.

État HTTP 404 -/enquête

type Rapport d'état

message/demande

description La ressource demandée n'est pas disponible.

Apache Tomcat/7.0.72

Console-Log :: GET http://appv2.proctur.com/enquiry/addEnquiry 404 (Introuvable) Navigué vers http://appv2.proctur.com/enquiry/addEnquiry

Si je ne rafraîchis pas la page et n'utilise pas l'application en une seule fois, c'est OK, je n'arrive pas à comprendre quel est le problème lors de l'actualisation.

PS :: c'est la première fois que j'héberge une application angular sur le serveur Tomcat si j'ai fait une erreur stupide, faites-le moi savoir.

Pour une meilleure clarification, j'ajoute le routing.module.ts où je charge paresseusement les modules. Ceci est importé dans app.module.ts ::

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

@NgModule({
imports: [
    RouterModule.forRoot([
        { path: '', redirectTo: '/authPage', pathMatch: 'full' },
        { path: 'authPage', loadChildren: 'app/components/auth-page/auth-page.module#AuthPageModule' },
        { path: 'course', loadChildren: 'app/components/course/course.module#CourseModule' },
        { path: 'enquiry', loadChildren: 'app/components/enquiry/enquiry.module#EnquiryModule' },
        { path: 'student', loadChildren: 'app/components/students/student.module#StudentModule' },
    ])
],
exports: [
    RouterModule
]
})
export class AppRoutingModule {
}
angulartomcattomcat7angular2-routing
9
Ronit Oommen

Lorsque angular angulaire sera diffusée à partir d'un serveur. Lorsque vous parcourez les pages, elle est gérée côté client. Lorsque vous actualisez la page, la demande est envoyée au serveur (Tomcat ou nœud) . mais cette URL routée n'existe pas sur le serveur. vient alors une erreur 404. vous pouvez résoudre par HashLocationStrategy, ajouté {useHash: true} objet dans la configuration de routage ie.

RouterModule.forRoot(routes, {useHash: true})

Plus de détails: - https://codecraft.tv/courses/angular/routing/routing-strategies/#_hashlocationstrategy

11
Akshay Garg

La réponse précédente est correcte, mais nous n'avons pas vraiment besoin de hachages dans nos URL. Le problème est le suivant: par exemple, si nous avons un itinéraire nommé '/ users/all' et que nous y naviguons à partir de '/' dans notre application, alors tout va bien, car le propre routeur d'Angular résoudra l'itinéraire et affichera le page, mais si nous allons directement à cette route, par exemple en tapant l'url dans la barre d'adresse du navigateur, nous obtiendrons 404, pourquoi? Parce que votre serveur (Tomcat dans votre cas) essaiera de trouver un dossier nommé 'users' et un fichier 'all' à l'intérieur, qui, évidemment, est inexistant, car il s'agit simplement d'une route Angular , pas un fichier réel dans le système de votre serveur. Mais vous pouvez configurer votre serveur d'une manière, il retournera à votre fichier index.html, Qui contient l'application, donc les pages seront affichées correctement (dans le cas de notre exemple, le serveur renverra index.html, L'application Angular s'exécutera et résoudra l'itinéraire). En savoir plus à ce sujet ici .

5
Armen Vardanyan

Angular (2+) prend en charge deux types de stratégies de routage - HashLocationStrategy et PathLocationStrategy. PathLocationStrategy est la configuration par défaut lorsque vous créez une application à l'aide de la CLI angular. PathLocationStrategy présente de nombreux avantages par rapport à la HashLocationStrategy et est la configuration recommandée qui est discutée dans la documentation ici .

L'inconvénient de PathLocationStrategy est qu'il nécessite une configuration spécifique à effectuer côté serveur. Si cette configuration n'est pas effectuée côté serveur, elle conduit à 404 lorsque les liens profonds sont accessibles directement. Cette configuration dépend également du serveur utilisé.

Pour résoudre le problème de lien profond lors du déploiement de angular (avec routage PathLocationStrategy) sur le serveur Apache Tomcat (8, 9) -

  1. Configurer RewriteValve dans server.xml
  2. Écrivez la règle de réécriture dans rewrite.config

server.xml -

...
      <Host name="localhost"  appBase="webapps"
            unpackWARs="true" autoDeploy="true">

        <Valve className="org.Apache.catalina.valves.rewrite.RewriteValve" />

...
      </Host>
...

rewrite.config note -/hello/est le chemin de contexte de l'application angular sur Tomcat)

RewriteCond %{REQUEST_PATH} !-f
RewriteRule ^/hello/(.*) /hello/index.html

J'ai documenté ce problème dans mon article - --- (Correction d'un problème de lien profond - Déploiement angular sur le serveur Tomcat

1
Nithin Kumar Biliya

Cela fonctionne également si vous définissez un fichier Web.xml de 404 pages.

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

Donc, actualisez la page http://appv2.proctur.com/enquiry/addEnquiry 404 erreur trouvée rediriger vers index.html et appeler votre itinéraire réel du côté angulaire, puis il ira à l'emplacement correct.

0
Sunil shakya