web-dev-qa-db-fra.com

Le routage angulaire 2 ne fonctionne pas lorsqu'il est déployé sur un serveur HTTP

Je vais développer une application simple Angular 2. J'ai créé un projet avec routage, à l'aide de la CLI angulaire et ajouté plusieurs composants à l'application à l'aide de la commande 'ng generate composant'. Puis j'ai spécifié le routage dans app-routing.module.ts comme suit.

importer {NgModule} de '@ angular/core'; 
 import {Routes, RouterModule} de '@ angular/router'; 
 import {HomeComponent} de './home/home.component' ;
 importer {AboutComponent} de './about/about.component';
import {UserComponent} de' ./user/user.component';
import {ErrorComponent} de './error/error.component' ; 
 import {SpecialpageComponent} from './specialpage/specialpage.component';

const routes: Routes = [
 {
 chemin: '',
 composant: HomeComponent 
 }, 
 {
 chemin: 'à propos', 
 composant: AboutComponent 
 }, 
 {
 chemin d'accès: 'utilisateur', 
 composant: UserComponent 
 }, 
 {
 chemin: 'page spéciale', 
 composant: SpecialpageComponent 
 }, 
 {
 chemin: '**',
 composant: ErrorComponent 
 } 

]; 

 @ NgModule ({
 Imports: [RouterModule.forRoot (routes)], 
 Exports: [RouterModule], 
 Fournisseurs: []
}) 
 export class AppRoutingModule {}

app.module.ts est comme suit.

 import {BrowserModule} à partir de '@ angular/platform-browser'; 
 import {NgModule} à partir de '@ angular/core'; 
 import {FormsModule} à partir de '@ angular/forms'; 
 importer {HttpModule} depuis '@ angular/http'; 
 importer {AppRoutingModule} depuis './app-routing.module' ;.________.import {AppComponent} depuis './app.component'
 import {HomeComponent} de './home/home.component';
import {AboutComponent} de' ./about/about.component';
import {ErrorComponent} de './error/error. composant '; 
 import {UserComponent} de' ./user/user.component';
import {SpecialpageComponent} de './specialpage/specialpage.component'; 

 @ NgModule ({
 declarations: [
 AppComponent, 
 HomeComponent, 
 AboutComponent, 
 ErrorComponent, 
 UserComponent, 
 SpecialpageComponent 
]. 
 imports: [
 BrowserModule, 
 FormsModule, 
 HttpModule, 
 AppRoutingModule 
]., 
 Fournisseurs: [], 
 Bootstrap: [AppComponent] 
}) 
 Exportation c lass AppModule {}

Je n'ai ajouté aucune modification pour les autres composants. Ensuite, j'ai déployé l'application à l'aide de la commande 'ng serve' et l'application fonctionne correctement avec les liens. Exemple: http: // localhost: 4200/about

 enter image description here

Mais lorsque je déploie le projet sur un serveur http, les liens ne fonctionnent pas comme prévu. J'ai déployé l'application à l'aide de la commande 'http-server ./dist' et l'application est correctement déployée, mais les liens ne fonctionnent pas. Quand je vais sur ' http: // localhost: 4200/about ', cela donne une erreur 404. 

 enter image description here

Est-ce que je fais quelque chose de mal? Pourquoi "ng-serve" fonctionne et "http-server" ne fonctionne pas?

Toute aide serait appréciée. Merci d'avance. 

J'ai téléchargé mon projet sur github .

angularnpmangular2-routingangular-cliangular2-template
23
kinath_ru

Ce problème est résolu en implémentant HashLocationStrategy qui ajoute # à tous vos itinéraires. Vous y parvenez en ajoutant HashLocationStrategy to AppModule providers.

    providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],

et ajoutez l'importation correspondante

   import { HashLocationStrategy, LocationStrategy } from '@angular/common';

Cela résoudra votre problème.

Et si vous ne voulez pas utiliser la HashLocationStrategy, vous pouvez utiliser la PahtLocationStrategy et ainsi votre application Angular n’affiche pas de hachage dans l’URL . Pour plus de détails, consultez le lien officiel: https: //. angular.io/api/common/PathLocationStrategy

18
Manu

Cela est dû au fait que le serveur http ne prend pas en charge fallback comme les serveurs lite-server ou Web Pack-dev. C’est pourquoi il indique que 404 n’a pas été trouvé . Il existe deux solutions pour résoudre ce problème:

  1. vous pouvez utiliser HashLocationStrategy comme mentionné ci-dessus.
  2. Si vous le déployez sur Apache ou sur le serveur IIS, vous pouvez simplement ajouter des configurations comme indiqué ici !

Note: Pour le développement, vous pouvez utiliser lite-server.

J'espère que ceci vous aidera.

7
Ashish Sharma

Cela se produira parce que cela va chercher une page à propos de qui n'est pas du tout à l'intérieur, donc 404. Options possibles:

  1. Si vous voulez utiliser http-server, utilisez un proxy qui redirige tout vers http: // localhost: your-port . 

    Option: -P ou --proxy Proxy toutes les demandes qui ne peuvent pas être résolues localement à l'URL donnée. par exemple: -P http://someurl.com

  2. Ne pas utiliser express du tout. Créez votre propre serveur http en utilisant express & Tout rediriger vers index.html

    En supposant que public soit votre dossier où vous gardez toutes les choses transpilées.

    var express = require('express');
var app = express();

var path = __dirname + '/public';
var port = 8080;

app.use(express.static(path));
app.get('*', function(req, res) {
    res.sendFile(path + '/index.html');
});
app.listen(port);
6
Parth Ghiya

Il sera résolu de cette façon:

Cas 1: pour les versions inférieures à Angular 5.1

1) Utilisez HashLocationStrategy comme indiqué ci-dessous: Dans AppModule , procédez comme suit.

1.1) import { HashLocationStrategy, LocationStrategy } from '@angular/common';

1.2) providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]

Cas 2: pour une version égale ou supérieure à Angular 5.1

2.1) Angular a introduit cette propriété onSameUrlNavigation pour résoudre le problème de rafraîchissement sur le serveur.

2.2) Ajoutez onSameUrlNavigation au RouterModule.forRoot dans imports array .

a) Dans le module de routage principal de l'application, i, e app.routing.module.ts/app.routing.ts ajoute la propriété.

Voir ci-dessous:

@ngModule({

    imports: 
    [
       RouterModule.forRoot(routes, {onSameUrlNavigation: ‘reload’})
    ],

    exports: [RouterModule],
 });

J'espère que ça aidera quelqu'un.

3
ArunDhwaj IIITH

Si vous souhaitez, comme moi, ne modifier aucun code, utilisez simplement ceci:

https://www.npmjs.com/package/angular-http-server

1
Sharpiro

J'ai résolu ce problème en ajoutant ceci dans les fournisseurs AppModule:

providers: [{provide: LocationStrategy, useClass: PathLocationStrategy}]

et importer

import { PathLocationStrategy, LocationStrategy } from '@angular/common';

Ensuite, j'ai créé .htaccess:

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

Tout fonctionne très bien sans # dans les URL :)

1
Maciej Socha

Pour le serveur Apache:

dans les serveurs de production

Ajoutez ou créez un fichier ".htaccess" à la racine du projet, ajoutez une règle de réécriture au fichier .htaccess comme indiqué.

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
0
Tanvir Sarker

Vous devriez essayer de spécifier l'URL dans la construction à partir du point où l'application doit initialiser

Ng build --prod --base-href="http://your.url.com/subdirectory/etc"
0
bardat

Pour Apache Server

  • Créez un nom de fichier .htaccess
  • Éditez ce fichier et écrivez index.html au lieu de index.php

  • Pour ceux qui n’ont pas de code, vous pouvez écrire le code ci-dessous dans votre fichier .htaccess: 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

  • Ce code peut ne pas fonctionner avec un certificat SSL - contactez votre fournisseur d'hébergement OR à l'adresse https://httpd.Apache.org/docs/current/howto/htaccess.html pour vous reporter aux documents.

0
Smit Patel

Selon la documentation de https://angular.io/guide/deployment (Apache, vous pouvez également rechercher nginx) Vous devez diriger le serveur vers index.html en utilisant le fichier .htaccess comme 

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

0
Shiva Sheshendra