web-dev-qa-db-fra.com

Chemin de route angulaire 6 ne fonctionnant pas pour une URL directe lorsqu'il est déployé dans un sous-répertoire

app.routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './public/home/home.component';

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: '../app/customers/customers.module#CustomersModule'
  },
  {
    path: 'admin',
    loadChildren: '../app/admin/admin.module#AdminModule'
  },
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: '**',    
    redirectTo: 'home',    
  }
];

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

Cela fonctionne très bien dans l'environnement Development . Si j'ouvre directement localhost:4200/home, la page attendue s'affiche.

Cependant, les build et deploy utilisant avec ng build --prod --base-href=/myngapp/ ne fonctionnent que sur www.domain.com/myngapp si j'ouvre le www.domain.com/myngapp/home directement, une erreur 404 non trouvée apparaît alors.

angularangular2-routing
3
Amit Shah

Vous devez configurer de bonnes règles de réécriture d'URL. Angular docs explique comment procéder pour les serveurs http les plus populaires. Vous pouvez trouver des détails ici.

https://angular.io/guide/deployment#production-servers

Ce qu’il fait est simplement de dire au serveur de toujours servir index.html, quel que soit le chemin de la requête. par exemple.

www.domain.com/myngapp/home -> serve index.html, pas home.html ou quelque chose de similaire www.domain.com/myngapp/some/child/routing -> sert index.html et n'essayez pas de trouver un fichier/child/routing.html ou php, etc.

6
Antoniossss

Vous devez configurer votre serveur HTTP (Apache, Nginx ou autres) pour rediriger tous les URI commençant par www.domain.com/myngapp/** vers le fichier index.html.

Notez que les itinéraires de votre application ( https://angular6demoamit.000webhostapp.com/ ) fonctionnent correctement lorsqu'ils sont accessibles "à l'intérieur d'Angular" par interaction avec des boutons et des menus. Cependant, lorsque vous essayez d'accéder à la route en la tapant directement sur le navigateur, le serveur ne connaît pas l'URI https://angular6demoamit.000webhostapp.com/home est une route d'une application angulaire. Il va probablement essayer de charger la page d'index d'un répertoire personnel inexistant.

Il n'y a pas une seule configuration pour résoudre votre problème. Cela dépendra de votre serveur HTTP et de votre infrastructure. Lisez le guide angular qui décrit des exemples de configuration pour certains types de serveurs HTTP: https://angular.io/guide/deployment#routed-apps-must-must- fallback-to-indexhtml .

1
Rodrigo

Si vous copiez les fichiers dans un sous-dossier du serveur, ajoutez l'indicateur de construction, --base-hreflike, si vous avez un fichier index.html sur le serveur /myngapp/index.html, puis ajoutez la commande avec href =/myngapp/else copier tous les fichiers dist et les coller sur le serveur sans base-href.

0
techdeepak