Weird behaviour of loopbackJS with AngularJS - angularjs

Question

I set html5mode(true) in my app.js. My code is as follows
$routeProvider.when( '/hello/there', {
templateUrl: 'partials/hello.html',
controller : 'HelloCtrl'
} );
// if none of the above routes are met, use this fallback
// which executes the 'AppCtrl' controller (controllers.js)
$routeProvider.otherwise( {
redirectTo: '/'
} );
$locationProvider.html5Mode(true);
But when I browse http://localhost:3000/hello/there
It is thowing 404 error by Loopback raiseUrlNotFoundError. When I set html5Mode(false) all works fine
How to make it work then with html5Mode true?
Thanks in advance

Answer 1

If you did that in server.js or in server/boot it won't work
because this will be served before the static middlware then all your static files(js, css, imgs) will go through this middlware first casuing you lots of error
the solution is to add a new middlware function in server/middlware/serveindex.js
module.exports = serveindex;
function serveindex(){
return function(req, res){
res.sendFile("index.html", {root: __dirname+"/../../client"})
}
}
Then in the middlware.json call this middlware after the static files like this
"files": {
"loopback#static": {
"params": "$!../client"
}
},
"files:after": {
"./middleware/serveindex":{
"enabled": true
}
},

Answer 2

You need to redirect all routes on the server side:
In server.js:
...
// -- Mount static files here--
// All static middleware should be registered at the end, as all requests
// passing the static middleware are hitting the file system
// Example:
app.use(loopback.static(path.resolve(__dirname, '../client'))); //mount static files first
...
app.all("/*", ...) //then redirect all routes
...