節點Express服務器深層鏈接不是AngularJS工作html5Mode

Question

（更新：我解決了這個問題，試想一下，在問題的末尾。）我這個問題似乎微不足道的我跑

，但我我非常沮喪，因爲我無法弄清楚：

我搭建了一個使用yeoman generator-angular的Angular應用程序。我需要使用Angular的html5mode來擺脫hashtag（請參閱下面的app.js）。我正在使用節點快遞服務器（請參閱server.js）來運行使用grunt build構建的應用程序。 根據需要，我在服務器中添加了選項，以便在從任何特定路線訪問應用程序時重定向至index.html。它適用於一個「路由」級別，即localhost:8080/research，但它不適用於兩個「級別」或更高級別，即localhost:8080/research/human。在這種情況下，刷新瀏覽器的時候，我得到這個錯誤：

The stylesheet http://localhost:8080/research/styles/vendor.8089f103.css was not loaded because its MIME type, "text/html", is not "text/css". human 
The stylesheet http://localhost:8080/research/styles/main.e7eff4cf.css was not loaded because its MIME type, "text/html", is not "text/css". human 
SyntaxError: expected expression, got '<' vendor.01f538ae.js:1:0 
SyntaxError: expected expression, got '<' 

我已經到處找，我已經嘗試了所有種類的選擇，但我不能夠解決它。我真的很感謝一些幫助，請！

app.js

angular 
    .module('testAngularApp', [ 
    'ngRoute', 
    'ngTouch', 
    'ngAnimate', 
    'ngSanitize', 
    'angulartics' 
    ]) 
    .config(function ($routeProvider, $locationProvider) { 

    $locationProvider.html5Mode(true); 

    $routeProvider 
     .when('/', { 
     templateUrl: 'views/mainFrontpage.html', 
     controller: 'MainFrontpageController' 
     }) 
     .when('/research', { 
     templateUrl: 'views/research.html', 
     controller: 'ResearchController' 
     }) 
     .when('/research/human', { 
     templateUrl: 'views/research-human.html', 
     controller: 'ResearchController' 
     }) 
     .when('/research/fly', { 
     templateUrl: 'views/research-fly.html', 
     controller: 'ResearchController' 
     }) 
     .otherwise ({ 
     templateUrl: 'views/notyetready.html', 
     }); 
    }); 

server.js

'use strict'; 

var express = require('express'); 
var path = require('path'); 
var morgan = require('morgan'); 
var fs = require('fs'); 

var currentDir = process.cwd(); 

var app = express(); 

var staticStats = fs.statSync(currentDir + '/dist'); 

if (staticStats.isDirectory()) { 
    app.use('/', express.static(currentDir + '/dist')); 

    // Here I have tried many different combinations 
    app.use("/styles", express.static(__dirname + "dist/styles")); 
    app.use("/scripts", express.static(__dirname + "dist/scripts")); 
    app.use("/views", express.static(__dirname + "dist/views")); 
    app.use("/fonts", express.static(__dirname + "dist/fonts")); 
    app.use("/templates", express.static(__dirname + "dist/templates")); 
    app.use("/images", express.static(__dirname + "dist/images")); 


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

    var server = app.listen(8080); 
    console.log('Node Express server listening on http://%s:%d', server.address().address,8080); 
} 
else { 
    console.log('No /dist folder, did not start the server'); 
} 

更新：解決方案

多虧了網友的評論，我問的問題在一種不同的方式，並找到了解決方案，使其工作s here。也就是說，<base href="/">標籤必須位於<link rel="stylsheet"..>標籤之前（我很難得到這麼愚蠢的東西！）

Answer 1

爲什麼不在這樣的角度路由中使用嵌套路由？

https://github.com/angular-ui/ui-router

Answer 2

我想這只是一個評論，但我還不能，你有沒有試過把你的路由下面的HTML5模式？

如果不需要，可以刪除if語句。

.when('/research/fly', { 
     templateUrl: 'views/research-fly.html', 
     controller: 'ResearchController' 
     }) 
     .otherwise ({ 
     templateUrl: 'views/notyetready.html', 
     }); 

     if(window.history && window.history.pushState){ 

     $locationProvider.html5Mode(true); 
     } 
}); 

Answer 3

也許嘗試使用不同的模式來匹配這聽起來像問題

app.all('/**/*', function(req, res, next) 

的原因不過我會問，你爲什麼和節點+快遞服務的靜態文件？如果你想要的是當地發展的一個靜態文件服務器，爲什麼不嘗試grunt-serve

然後，如果你想爲你可以使用nginx服務器與角度的作品真的很好在HTML5模式