节点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模式