(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", i.e., localhost:8080/research , but it does not work for two "levels" or more, i.e., 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