Come gestire il percorso della rotta angolare2 in Nodejs

Question

Sto lavorando a un'app NodeJS con Angular2. Nella mia app, ho una pagina iniziale e una pagina di ricerca. Per home page Ho una pagina HTML che renderà per la localhost: 3000/ e dalla Home page utente navigare verso ricerca cioè localhost: 3000/ricerca pagina che ho gestito da percorsi angular2.

Non ho la pagina per la pagina di ricerca, la sua vista viene renderizzata da angular2. Ma quando colpisco direttamente lo localhost: 3000/search dato che non ho questo instradamento nella mia app di nodo dà l'errore.

Non so Come gestirlo nell'app del nodo?

Answer 1

Se si immette localhost:3000/search direttamente nella barra di navigazione del browser, il browser invia una richiesta a "/ search" sul proprio server, che può essere visualizzato nella console (assicurarsi di selezionare il pulsante "Preserve Log").

Navigated to http://localhost:3000/search 

Se si esegue un server completamente statica, questo genera un errore, come la pagina di ricerca non esiste sul server. Usando express, ad esempio, puoi prendere queste richieste e restituire il file index.html. Viene avviato il bootstrap angular2 e viene attivata la/route di ricerca descritta in @RouteConfig.

// 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); 
}); 

Answer 2

è necessario utilizzare HashLocationStrategy

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

Nel file di bootstrap.

Se si desidera andare con PathLocationStrategy (senza #) è necessario impostare la strategia di riscrittura per il proprio server.

Answer 3

Ho scavato questo argomento per un po 'di tempo e ho provato un sacco di metodi che non funzionano. Se si utilizza angular-cli e con express, ho trovato una soluzione se la risposta scelta non funziona per voi.

Prova questo modulo nodo: express-history-api-fallback

[angolari] modificare il file app.module.ts, sotto @NgModule> importazioni come segue:

RouterModule.forRoot(routes), ... 

Questo è il cosiddetto: "Strategia Location"

probabilmente erano usando "Hash Location Strategy" come questo:

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

[Express & Nodo] In pratica, è necessario gestire correttamente l'URL, quindi se si desidera chiamare "api/dati" ecc. Che non sia in conflitto con la strategia di posizione HTML5.

Nel file server.js (se è stato utilizzato generatore espresso, ho rinominarlo come middleware.js per chiarezza)

Fase 1. - Richiede l'express-history-api-fallback module.

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

Passaggio 2.Potresti avere un sacco di percorsi modulo, sth. come:

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

Becareful con l'ordine che si sta scrivendo, nel mio caso io chiamo il diritto del modulo sotto app.use ('/', indice);

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

* Assicurarsi che sia prima dove si gestisce 404 o sth. come quello .

questo approccio funziona per me:) Sto usando pila EAN (Angular4 con cli, espresso, Node)