Angular2 routing in heroku

Question

I have an angular2 application in heroku, and I'm having trouble with the router. In localhost everything works like a charm, but when I deploy to heroku and try to access by any route that is not index i got 404 error, if I go index, then navigate trough page the routing occurs normally, unless I reload the page, then i get another 404, here's the piece of my package.json used by heroku "heroku-prebuild": "npm install http-server -g", "heroku-postbuild": "ng build --target=production --environment=prod && rsync -a dist/* .", "start": "http-server dist/", Do I need to setup any express rewriting to be used in my Procfile?

Answer 1

It seems to be a problem from the server , angular knows routing but your server doesnot know all these paths. The simple solution is to redirect all the paths to your main index.html . Like this,

app.get('*', function (req, res) {
  res.sendfile('./dist/index.html'); // load our index.html file
});

This will not give any 404 error , all your paths will be redirected to main path i.e index.html and angular routing will run the same as it was in your local host .