Direct Link to URL with route params breaks AngularJS App

Question

Im having a problem when I have a direct link to a page that has a param after it. Links from the page work. Im working on a blog app.

localhost/blog loads correctly. On that page I have a link to localhost/blog/name-of-article. That link will load correctly. The problem is when I refresh the /blog/name-of-article page or directly go to it. It'll break and not load anything.

The Javascript console in chrome just gives the error "Uncaught SyntaxError: Unexpected token < " for all of the javascript files. I also have this problem when the url has a trailing / which seems like a common problem for angular. Not sure if it is related though.

relevant part of my routes.

app.config(['$routeProvider','$locationProvider',
  function($routeProvider,$locationProvider){

    $routeProvider.
        when('/',{
        templateUrl: '/partials/home.html',
            controller: 'HomeController as HomeCtrl'

        }).
        when('/home',{
            templateUrl: '/partials/home.html',
            controller: 'HomeController as HomeCtrl'
        }).
        when('/blog',{
            templateUrl: '/partials/blog.html',
            controller: 'BlogController as blogCtrl'
        }).
        when('/blog/:name', {
            templateUrl: '/partials/article.html',
            controller: 'ArticleController as articleCtrl'

        }).
        otherwise({
            redirectTo: '/'
        });

         $locationProvider.html5Mode(true);

}]);

I'm using Node/Express for the server and api for the angular app.

app.use('*', function(req, res){
  res.sendFile(__dirname + '/public/index.html');
  console.log('page loaded');
});

I also have routes for /api/contact and /api/article.

Answer 1

Figured out what happened for me. I was able to see that the angular app was making requests to the server from a different path when there was a trailing slash or the extra parameter. /blog/article was requesting all of the files from /blog/javascripts , /blog/stylesheets etc. which don't exist.

Adding

<base href="/index.html">

to the index.html file fixed the issue.

found in the answers here Reloading the page gives wrong GET request with AngularJS HTML5 mode

Answer 2

I am assuming that your default html page, let's say index.html lives at the root and all the other dependencies are inside /src. This will have all your partials, javascript files, css etc.

You should configure your express server in such a way that for all the requests that target www.example.com/src, it should look for the resources in the /src folder in the root directory. The following line of configuration will tell express to do just that.

var staticDirectory = "/src";
app.use('/src', express.static(__dirname + staticDirectory));

And all the other requests should return index.html.

Configuring express server this way will make it return index.html for all the requests that don't target /src. If you have any other folders that have static content, you can configure express to work with them the same way as we did for /src.

Finally, your express configuration file should look like this.

var express = require('express');
var app     = express();
var staticDirectory = "/src";    
app.use('/src', express.static(__dirname + staticDirectory));
app.get('/*', function(req,res){
    res.sendFile(__dirname + '/index.html');
});
app.listen(9000, function(){
    console.log('Express server is listening on 9000. Yayy!');
})

I believe this will solve your problem. I tested this out with this structure.