Wie gehe ich mit angle2 Route in Nodejs?

Question

Ich arbeite an einer NodeJS App mit Angular2. In meiner App habe ich eine Startseite und eine Suchseite. Für Homepage habe ich eine HTML-Seite, die für die localhost machen wird: 3000/ und von der Startseite Benutzer navigieren zu Suche d.h localhost: 3000/Suche Seite, die ich behandelt durch angular2 Routen.

Ich habe nicht die Seite für die Suchseite ihre Ansicht rendern durch die angular2. Aber wenn ich direkt Localhost: 3000/Suche schlug, da ich dieses Routing in meiner Knoten-App nicht habe, gibt es den Fehler.

Ich weiß nicht Wie geht das in der Knoten App?

Answer 1

Wenn Sie localhost:3000/search direkt in der Browser-Navigationsleiste eingeben, wird von Ihrem Browser eine Anfrage an Ihren Server gesendet, die in der Konsole angezeigt wird (stellen Sie sicher, dass Sie die Schaltfläche "Protokoll beibehalten" aktivieren).

Navigated to http://localhost:3000/search 

Wenn Sie einen vollständig statischen Server ausgeführt werden, erzeugt dies einen Fehler, da die Suchseite nicht auf dem Server vorhanden. Mit express können Sie beispielsweise diese Anfragen abfangen und die Datei index.html zurückgeben. Der angular2-Bootstrap startet und die in Ihrer @RouteConfig beschriebene Suchroute wird aktiviert.

// 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

Sie müssen HashLocationStrategy verwenden

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

In der Bootstrap-Datei.

Wenn Sie mit PathLocationStrategy (ohne #) gehen möchten, müssen Sie die Umschreibstrategie für Ihren Server einrichten.

Answer 3

Ich habe dieses Thema für eine ganze Weile gegraben, und versuche viele Methoden, die nicht funktionieren. Wenn Sie angle-cli und mit express verwenden, habe ich eine Lösung gefunden, wenn die gewählte Antwort nicht für Sie funktioniert.

diesen Knotenmodul Versuchen: express-history-api-fallback

[Angular] Ihre app.module.ts Datei ändern, unter @NgModule> Einfuhren wie folgt:

RouterModule.forRoot(routes), ... 

Dies wird so genannt: "Location-Strategie"

Sie waren wahrscheinlich "Hash Location-Strategie" wie folgt aus:

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

[Express & Node] Grundsätzlich müssen Sie die URL richtig behandeln, also wenn Sie "API/Daten" usw. aufrufen möchten, die nicht mit der HTML5-Standort-Strategie in Konflikt stehen.

In Ihrem server.js Datei (wenn Sie Express-Generator verwendet, habe ich es als middleware.js für Klarheit umbenennen)

Schritt 1. - Erfordern die express-history-api-fallback module.

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

Schritt 2.Sie können eine Menge Routen Modul haben, etw. wie:

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

Becareful mit der Bestellung Sie schreiben, in meinem Fall nenne ich das Modul direkt unter app.use ('/', Index);

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

* Stellen Sie sicher, dass es vor, wo Sie 404 oder etw. so wie das .

Dieser Ansatz funktioniert gut für mich:) Ich bin mit EAN-Stack (Angular4 mit cli, Express, Node)