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');
}

更新：解决方案

感谢用户的评论，我以不同的方式提出了问题，并找到了使其有效的解决方案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非常有效

Node Express服务器深度链接不能与AngularJS html5Mode一起使用

3 个答案: