Le routage ne fonctionne pas correctement

J'ai créé une application angulaire 2. Et voici le app.routes.tsLe routage ne fonctionne pas correctement

import { Routes } from '@angular/router'; 
import { RoleListComponent } from './role-list.component'; 
import { RoleEditComponent } from './role-edit.component'; 

export const appRoutes: Routes = [ 
    { 
     path: 'role-list', component: RoleListComponent 
    } 

    , { 
     path: 'role-edit', component: RoleEditComponent 
    } 
    , { 
     path: '', redirectTo: '/role-list', pathMatch: 'full' 
    } 
];

Il y a deux boutons sur l'écran qui accède à des pages que. Et puis je configuré proxy à l'aide http-proxy-middleware dans bs-config.js

bs-config.js

var proxy = require('http-proxy-middleware'); 

var apiProxy = proxy('/services', { 
    target: 'http://localhost:9000', 
    changeOrigin: true 
}); 

module.exports = { 
    port: 9001, 
    server: { 
     baseDir: "src", 
     routes: { 
      "/node_modules": "node_modules" 
     }, 
     middleware: { 
      1: apiProxy, 
     } 
    } 
};

Maintenant, quand je commence ma demande, il frappe la http://localhost:9001/role-list et affiche un message d'erreur à l'écran

Cannot GET /role-list

Si je tape localhost:9001 alors cela fonctionne et montre l'URL http://localhost:9001/role-list dans la barre d'adresse, mais si je frappe la même URL d irectly montre l'erreur ci-dessus. Maintenant, si je supprime le middleware proxy, cela fonctionne très bien. Je ne suis pas capable de comprendre quel est le problème? Est-ce que je configure quelque chose de mal? Quel pourrait être le problème possible?

Source

2017-07-04 Sunil Garg

C'est probablement parce que le serveur (proxy) ne supporte pas HTML5 pushState. Vous pouvez essayer d'ajouter 'useHash: true' à la configuration de votre routeur (vous obtiendrez une URL différente, mais si elle fonctionne de cette façon, elle vérifie mon hypothèse) –

Merci !! Cela fonctionne mais hash montre dans mon URL et je ne veux pas ça. Y a-t-il une autre solution? –

Comme je l'ai mentionné dans mon commentaire précédent, c'est seulement pour vérifier. Vous avez besoin d'un serveur prenant en charge HTML5 pushState ou configurez le serveur dont vous disposez pour le prendre en charge. Je ne connais pas votre serveur, mais il y a beaucoup de réponses à tous les types de serveurs. –

Votre problème est côté serveur.

Vous devez router (côté serveur) chaque route angulaire vers le chemin de base spécifié dans index.html. Par exemple, voici comment cela se fait dans nodeJS:

app.get('/*', (req, res) => { 
    res.render('index', {req, res}); 
});

ou Apache:

<IfModule mod_rewrite.c> 
    RewriteEngine On 
    RewriteBase/
    RewriteRule ^index\.html$ - [L] 
    RewriteCond %{REQUEST_FILENAME} !-f 
    RewriteCond %{REQUEST_FILENAME} !-d 
    RewriteRule . /index.html [L] 
</IfModule>

Sinon, lorsque votre client atteindra par exemple www.example.com/path/someThing votre serveur recherchera le fichier index.html dans le /var/www/example.com/path/someThing/ au lieu de /var/www/example.com/

Source

2018-02-12 12:11:27

Le routage ne fonctionne pas correctement

Répondre

Questions connexes