Weird behaviour of loopbackJS with 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
...