html5mode wrong mime type

Question

I've got my redirect working correctly, the only problem is now all my style sheets are being served as text/html because it's being piped through core.index It only gives me the error for style sheets too not JS. How do I resolve this?

Error:

Resource interpreted as Stylesheet but transferred with MIME type text/html:

application.js

angular.module(ApplicationConfiguration.applicationModuleName).config(['$locationProvider',
    function($locationProvider) {
        $locationProvider.html5Mode({
            enabled: true,
            requireBase: false
        });
        $locationProvider.hashPrefix('!');
    }
    ])

express.js

app.use(express.static(path.resolve('./public')));
// Globbing routing files
config.getGlobbedFiles('./app/routes/**/*.js').forEach(function(routePath) {
    require(path.resolve(routePath))(app);
});

var core = require('../app/controllers/core.server.controller.js');
app.get('/*', core.index);

core.server.controller.js

exports.index = function(req, res) {
res.render('index', {
    user: req.user || null,
    request: req
});
};

core.client.routes.js

// Setting up route
angular.module('core').config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
    // Redirect to home view when route not found
    $urlRouterProvider.otherwise('/404');

    $stateProvider

    .state('admin', {
        url: '/admin',
        templateUrl: 'modules/core/views/home.client.admin.view.html',

    });

}
]);

Answer 1

That would not be the correct way to serve static content - images, CSS and javascript files that run on the browser.

Take a look at this article

Basically, assuming that your directory structure is as follows:

-- public
    |-- css
    |-- img
    `-- js

where public is the folder that contains all the sub folders for hosting stylesheets, images etc.

Then, in your nodejs code, where you have the var app = express() code, have the following code after it:

app.use(express.static('public'));

Thus, when the browser encounters a stylesheet declaration such as:

<link rel="stylesheet" href="css/style.css/>

it will make a request to /css/style.css and your express server will then correctly serve the stylesheet.

Have the code app.get("/*", core.index) at the end of all the above code to ensure that it is the last option that the server tries when attempting to match a request path to a request handler.