Node Express server deep linking not working with 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", 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

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!)

ali-pourzahmatkesh · Accepted Answer · 2015-10-22 18:20:22Z

0

Why not use nested routing in angular routing like this ?

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

answered Oct 22, 2015 at 18:20

ali-pourzahmatkesh

11311 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

David JM Over a year ago

Thanks for the suggestion. This is something I will definitely consider in the future. But the code I am showing here is a small example from a way larger application, I prefer to avoid refactoring the whole thing. So... Is there any solution for the node problem? Thanks so much again!

Spade · Accepted Answer · 2015-10-27 19:42:42Z

0

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

answered Oct 27, 2015 at 19:42

Spade

333 bronze badges

Comments

royka · Accepted Answer · 2015-10-27 21:18:28Z

0

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

answered Oct 27, 2015 at 21:18

royka

1,6082 gold badges13 silver badges10 bronze badges

4 Comments

David JM Over a year ago

Thanks @royka I tried before that pattern and still does not work. It cannot be that complicated. For local development I use grunt serve, which has the same problem with this html5mode. It is frustrating that I cannot make it work. It should be very easy. I will give a try to nginx anyway (thanks!), but why the heck is not working with node express???

royka Over a year ago

What does your index.html look like? Specifically the imports

royka Over a year ago

Also what does currentDir + /dist produce is it what you expect?

David JM Over a year ago

Thanks @royka - You made me ask the question in a different way and I found the answer. The solution is here. I just moved the location of the <base> tag as suggested and... bingo! it works!

Collectives™ on Stack Overflow

Node Express server deep linking not working with AngularJS html5Mode

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related