web-dev-qa-db-fra.com

Comment gérer le chemin de la route angular2 dans Nodejs?

Je travaille sur une application NodeJS avec Angular2. Dans mon application, j'ai une page d'accueil et une page de recherche. Pour la page d’accueil, j’ai une page HTML qui rendra l’emplacement localhost: 3000/et l’utilisateur de la page d’accueil menant à search ie localhost: 3000/search page gérée par voies angulaires2 .

Je n'ai pas la page pour la page de recherche que sa vue rend par angular2. Mais lorsque je frappe directement localhost: 3000/search , étant donné que je n'ai pas ce routage dans mon application de nœud, cela donne l'erreur.

Je ne sais pas comment gérer cela dans l'application de nœud?

node.jsangularangular2-routing
13
Rhushikesh

Si vous entrez localhost:3000/search directement dans la barre de navigation du navigateur, celui-ci envoie une requête à "/ search" sur votre serveur, visible dans la console (veillez à cocher le bouton "Conserver le journal"). 

Navigated to http://localhost:3000/search

Si vous exécutez un serveur entièrement statique, cela génère une erreur, car la page de recherche n'existe pas sur le serveur. En utilisant express, par exemple, vous pouvez intercepter ces demandes et renvoyer le fichier index.html. Le démarrage angular2 bootstrap et la route/search décrite dans votre @RouteConfig sont activés.

// example of express()
let app = express();
app.use(express.static(static_dir));

// Additional web services goes here
...

// 404 catch 
app.all('*', (req: any, res: any) => {
  console.log(`[TRACE] Server 404 request: ${req.originalUrl}`);
  res.status(200).sendFile(index_file);
});
25
user3636086

Vous devez utiliser HashLocationStrategy 

import { LocationStrategy, HashLocationStrategy } from "angular2/router";
bootstrap(AppComponent, [
 ROUTER_PROVIDERS,
 provide(LocationStrategy, { useClass: HashLocationStrategy })
]);

Dans votre fichier de démarrage.

Si vous souhaitez utiliser PathLocationStrategy (sans #), vous devez configurer la stratégie de réécriture de votre serveur. 

1
Vlado Tesanovic

J'ai creusé ce sujet pendant un bon bout de temps et j'ai essayé beaucoup de méthodes qui ne marchaient pas. Si vous utilisez angular-cli et express, j’ai trouvé une solution si la réponse choisie ne vous convient pas. 

Essayez ce module de nœud: express-history-api-fallback

[Angular] Modifiez votre fichier app.module.ts sous @NgModule> comme suit: 

RouterModule.forRoot(routes), ...

C'est ce qu'on appelle: "Stratégie de localisation"

Vous utilisiez probablement "Stratégie de hachage" comme ceci: 

RouterModule.forRoot(routes, { useHash: true }) , ...

[Express & Node] Fondamentalement, vous devez gérer l'URL correctement. Si vous souhaitez appeler "api/datas", etc., cela n'entre pas en conflit avec la stratégie de localisation HTML5. 

Dans votre fichier server.js (si vous avez utilisé Express Generator, je l'ai renommé middleware.js pour plus de clarté). 

Étape 1. - Requiert le module express-history-api-fallback .

const fallback = require('express-history-api-fallback');

Étape 2 . Vous pouvez avoir beaucoup de module d'itinéraires, qc. comme : 

app.use('/api/users, userRoutes);
app.use('/api/books, bookRoutes); ......
app.use('/', index); // Where you render your Angular 4 (dist/index.html)

Attention à l'ordre que vous écrivez, dans mon cas, j'appelle le module juste sous app.use ('/', index);

app.use(fallback(__dirname + '/dist/index.html'));

* Assurez-vous que c'est avant l'endroit où vous manipulez 404 ou qc. comme ça . 

Cette approche fonctionne pour moi:) J'utilise une pile EAN (Angular4 avec cli, Express, Node) 

0
Joe Lee