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

Question

( Update : I solved the problem. Just look at the end of the question)

I am running with this problem that seems trivial to me, but I am very frustrated because I am not able to figure it out:

I scaffolded an Angular application using yeoman generator-angular . I need to use the html5mode of Angular to get rid of the hashtag (please, see app.js below). I am using a node express server (see server.js ) to run the app built with grunt build . As required, I added the option in the server to redirect to index.html when accessing the app from any specific route. It works with one level of "routing", ie, localhost:8080/research , but it does not work for two "levels" or more, ie, localhost:8080/research/human . In this case, when refreshing the browser, I get this error:

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 '<'

I have searched everywhere, I have tried all sort of options, but I am not able to fix it. I would really appreciate some help, please!

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

Update: Solution

Thanks to the comments of the users, I asked the question in a different way and found the solution that make it works here . That is, the <base href="/"> tag must be located before the <link rel="stylsheet"..> tags (what a hard time I got for such a stupid thing!)

Answer 1

Why not use nested routing in angular routing like this ?

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

Answer 2

I wanted this to be just a comment but I can't yet, Have you tried placing the html5 mode below your routes ?

Can remove the if statement if you do not need it.

.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

Maybe try using a different pattern to match against that sounds like the cause of the problem

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

However I would ask why are you serving the static files with node + express? If all you want is a static file server for local development why not try grunt-serve

Then if you want to serve the static files on a server you can use nginx which works really well with angular in html5 mode