Node Express 服务器深度链接不适用于 AngularJS html5Mode

Question

（更新：我解决了问题，看问题的最后）

我遇到了这个对我来说似乎微不足道的问题，但我很沮丧，因为我无法弄清楚：

我使用 yeoman generator-angular 搭建了一个 Angular 应用程序。我需要使用 Angular 的html5mode 来摆脱标签（请参阅下面的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');
}

更新：解决方案

感谢用户的 cmets，我以不同的方式提出了这个问题，并找到了使其工作的解决方案 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)

但是我会问你为什么用 node + express 提供静态文件？如果你想要的只是一个用于本地开发的静态文件服务器，为什么不试试grunt-serve

如果你想在服务器上提供静态文件，你可以使用nginx，它在 html5 模式下非常适合 angular