Angular 6 Application Breaks on reload after production build

Question

I have an application where i have kept that dist folder which we get after success full production build on my server. All works fine all modules & components are working perfectly. Untill I reload the browser window manually, it throws the below errors. Also i have build the project using base-href -- /dist/

        Object not found!
        The requested URL was not found on this server. If you entered the URL 
        manually please check your spelling and try again.

        If you think this is a server error, please contact the webmaster.

Answer 1

You have to setup your server to send index.html (generally) for any URL that does not exist.

What happens is when you move to a different route within the application, it is the JS that is handling your routing. But once you hit refresh, it is the browser asking your server to handle that request and since routes are not handled at the server side, it reports the said error.

Hence, you need to deliver the index file, no matter what route the browser asks for.

Well, if we talk about hitting the api from the front end, then you may use the concept called reverse proxy, if you have got any static server in between or handle /api route before any * route at server side, to let your request be handled by the server differently.

Take a look at this guide to configure your server.

---

There is however a clever way to handle routing as well. By using useHash: true. Please look at the guide here.

RouterModule.forRoot(routes, { useHash: true })