AngularJS: Relative Linkpfade sind kaputt, wenn html5mode (true) auf

Question

Ich habe gesucht und ich habe "Lösungen" zu diesem Problem gefunden, aber ich kann immer noch nicht richtig funktionieren.

Das Szenario:

Ich baue eine Angular (Version 1.2) Website mit dem UI-Router und es auf einem Node-Server auf localhost läuft. Ich versuche, mit dem $ locationProvider "hübsche" URLs zu bekommen und html5 (true) einzuschalten. Meine Website funktioniert einwandfrei, wenn Sie sie anklicken, aber wenn ich versuche, zu einem relativen Linkpfad zu navigieren oder den Linkpfad zu aktualisieren, wird die Seite unterbrochen. Ich beabsichtige auch diese Webapp Heroku bereitstellen, wenn beendet:

RELATIV LINK PFAD:

http://localhost:8000/locksmith-services 

PAGE Ausgangsergebnis

Cannot GET /locksmith-services 

Schritte I hab genommen:

1.) In meinem "index.html" < head>, ich habe meine Basis-URL auf:

<base href="/"></base> 

2.) In meiner app.js-Datei (für Angular), habe ich es wie folgt geschrieben:

: In meiner Navigation

// App Starts 
angular 
    .module('app', [ 
     'ui.router', 
     'ngAnimate', 
     'angular-carousel' 
    ]) 
    .config(['$urlRouterProvider', '$stateProvider', '$locationProvider', function($urlRouterProvider, $stateProvider, $locationProvider) { 
     $urlRouterProvider.otherwise("/"); 

     $stateProvider 
      .state('home', { 
       url: '/', 
       templateUrl: 'pages/home.html', 
       controller: 'homeCtrl' 
      }) 
      .state('services', { 
       url: '/locksmith-services', 
       templateUrl: 'pages/locksmith-services.html', 
       controller: 'servicesCtrl' 
      }) 
      .state('locations', { 
       url: '/locksmith-locations', 
       templateUrl: 'pages/locksmith-locations.html' 
      }) 
      .state('payment', { 
       url: '/locksmith-payment', 
       templateUrl: 'pages/locksmith-payment.html' 
      }) 
     // use the HTML5 History API 
     $locationProvider.html5Mode(true); 
    }]) 

3.), ich meine hTML geschrieben haben

4.) Meine server.js Datei (Node-Server)

var express = require('express'); 
var app = express(); 

app.use(express.static(__dirname + '/front')); 
var port = process.env.PORT || 8000; 
app.listen(port); 

Was wäre die beste Lösung sein? Vielen Dank im Voraus für Ihre Hilfe.

Answer 1

Dank https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode für die Unterstützung @trehyu Ich komme zu dieser Antwort.

Wie er schrieb, brauchte ich etwas Setup auf meiner server.js Datei, die den Benutzer zu meiner "index.html" Datei umleitet.

Also abhängig von Ihrer Dateistruktur ...

VOR (nicht funktioniert)

var express = require('express'); 
var app = express(); 

app.use(express.static(__dirname + '/front')); 
var port = process.env.PORT || 8000; 
app.listen(port); 

NACH (Arbeits)

var express = require('express'); 
var app = express(); 

app.use('/js', express.static(__dirname + '/front/js')); 
app.use('/build', express.static(__dirname + '/../build')); 
app.use('/css', express.static(__dirname + '/front/css')); 
app.use('/images', express.static(__dirname + '/front/images')); 
app.use('/pages', express.static(__dirname + '/front/pages')); 

app.all('/*', function(req, res, next) { 
    // Just send the index.html for other files to support HTML5Mode 
    res.sendFile('/front/index.html', { root: __dirname }); 
}); 

var port = process.env.PORT || 8000; 
app.listen(port); 

Ich hoffe, das jemand anderes hilft!

Answer 2

Wenn HTML5mode auf true gesetzt ist, müssen Sie etwas auf Ihrem Server einrichten, das den Benutzer automatisch auf Ihre Indexseite umleitet, sodass der AngularJS UI Router von dort aus die Leitung übernehmen kann.

Der Grund dafür ist, dass ohne den Hash (#) in der URL, es als eine literale URL und versucht, dort zu navigieren, wenn Sie die URL direkt aktualisieren oder einfügen.

Ich bin nicht sehr vertraut mit Knoten so nicht sicher, wie Sie das tun würde, aber es gibt eine FAQ-Seite auf dem UI-Router GitHub die Ihnen den Einstieg erleichtern sollen: