Le routage d'Angular 2 ne fonctionne pas lorsqu'il est déployé vers un serveur Http

Question

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

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

const routes: Routes = \[
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'about',
    component: AboutComponent
  },
    {
    path: 'user',
    component: UserComponent
  },
  {
    path: 'specialpage',
    component: SpecialpageComponent
  },
  {
    path: '\*\*',
    component: ErrorComponent
  }

\];

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

app.module.ts est le suivant.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ErrorComponent } from './error/error.component';
import { UserComponent } from './user/user.component';
import { SpecialpageComponent } from './specialpage/specialpage.component';

@NgModule({
  declarations: \[
    AppComponent,
    HomeComponent,
    AboutComponent,
    ErrorComponent,
    UserComponent,
    SpecialpageComponent
  \],
  imports: \[
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule
  \],
  providers: \[\],
  bootstrap: \[AppComponent\]
})
export class AppModule { }

Je n'ai pas ajouté de modifications pour les autres composants. J'ai ensuite déployé l'application en utilisant la commande 'ng serve' et l'application fonctionne bien avec les liens. Par exemple : http://localhost:4200/about

Mais lorsque je déploie le projet dans http-server, les liens ne fonctionnent pas comme prévu. J'ai déployé l'application en utilisant la commande 'http-server ./dist' et l'application est bien déployée, mais les liens ne fonctionnent pas. Lorsque je vais dans ' http://localhost:4200/about ', cela donne une erreur 404.

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 .

Answer 1

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

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

et ajouter l'importation correspondante

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

Cela résoudra votre problème.

Et si vous ne voulez pas utiliser l'option HashLocationStrategy vous pouvez utiliser l'option PahtLocationStrategy et votre application Angular n'affichera donc pas Hash dans l'URL. Pour plus de détails, consultez le lien officiel : https://angular.io/api/common/PathLocationStrategy

Answer 2

C'est parce que le serveur http ne supporte pas solution de repli comme lite-server ou web pack-dev server. C'est pourquoi il affiche 404 non trouvé . Il existe deux solutions pour résoudre ce problème :

1. vous pouvez utiliser Stratégie de localisation par hachage comme mentionné ci-dessus.
2. Si vous le déployez sur un serveur Apache ou IIS, vous pouvez simplement ajouter des configurations comme indiqué ci-dessous. aquí ¡!

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

J'espère que cela vous aidera.

Answer 3

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

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

et l'importation

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

J'ai ensuite créé un 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

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

Answer 4

Il sera résolu de cette manière :

Cas-1 : Pour une version inférieure à Angular 5.1

1) Utiliser Stratégie de localisation par hachage comme indiqué ci-dessous : Sur AppModule faites ce qui 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 surmonter le problème de rafraîchissement sur le serveur.

2.2) Ajouter onSameUrlNavigation au RouterModule.forRoot en tableau des importations .

a) Dans le module principal de routage de l'application, c'est-à-dire app.routing.module.ts / app.routing.ts ajoutez la propriété

Voir ci-dessous :

@ngModule({

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

    exports: [RouterModule],
 });

J'espère que cela aidera quelqu'un.

Answer 5

Cela se produira parce qu'il va trouver une page à propos de qui n'existe pas du tout à l'intérieur, d'où le chiffre 404. Options possibles :

1. Si vous souhaitez utiliser un serveur http, utilisez un proxy qui redirigera tout vers http://localhost:your-port .

   Option : -P o --proxy Proxie toutes les requêtes qui ne peuvent pas être résolues localement à l'url donnée. par exemple : -P http://someurl.com

2. N'utilisez pas du tout l'express. Créez votre propre serveur http en utilisant express et redirigez tout vers index.html.

   En supposant que public est votre dossier où vous gardez toutes les choses transposé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);