Angular 4 Router - Erreur de page introuvable sur la redirection

Question

J'ai une application Angular 4 qui fonctionne plutôt bien. J'ai utilisé HashLocationStrategy mais j'ai décidé de ne plus avoir de hash dans mes URLs.

Mon routeur mis en place ressemble à quelque chose comme ça maintenant ...

export const routes: Routes = [ 
    { 
    path: '', 
    component: TilesComponent 
    }, 
    { 
    path: 'profile/:urlUserName', 
    component: ProfileComponent 
    }, 
    { 
    path: 'forBusiness', 
    component: ForBusinessComponent 
    }, 
    { 
    path: 'login', 
    component: LoginPageComponent 
    }, 
    { 
    path: 'editTile/:urlUserName', 
    component: EditTileComponent, 
    canActivate: [AuthenticationService] 
    } 

]; 

export const appRoutingProviders: any[] = []; 

export const routing = RouterModule.forRoot(routes, { }); 

J'ai un lien de ma page d'ouverture qui est générée comme ça ...

routerLink="/forBusiness" 

Il réoriente à cette page ...

https://www.tilecase.com/forBusiness

maintenant, si je laisse tomber tout ce ur l dans un navigateur et essayer de charger la page forBusiness seul, je reçois une erreur «Page introuvable».

Que dois-je faire pour ma route ou ma mise en page pour que cela fonctionne?

Answer 1

il y a deux types de LocationStrategy 1. HashLocationStrategy 2. PathLocationStrategy

Vous avez besoin PathLocationStrategy

ajouter dans votre root-module

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

// add this in provider 
{ provide: LocationStrategy, useClass: PathLocationStrategy } 

si votre serveur est apache créer simplement un fichier avec un nom de .htaccess collez ces données

<IfModule mod_rewrite.c> 
    Options Indexes FollowSymLinks 
    RewriteEngine On 
    RewriteBase /myappdirectory/ 
    RewriteRule ^index\.html$ - [L] 
    RewriteCond %{REQUEST_FILENAME} !-f 
    RewriteCond %{REQUEST_FILENAME} !-d 
    RewriteRule . /index.html [L] <--- get the index.html file path starting from public html folder 
</IfModule> 

mise à jour de la dernière ligne en fonction de la commande

enregistrer, puis rafraîchir la page. heureusement votre page fonctionne

Pour le serveur IIS suivez ce lien

http://jasonwatmore.com/post/2017/02/24/angular-2-refresh-without-404-in-node-iis