Angular 4 Routing not working on live web-app

The issue you have here has to do with the nature of Single Page Application frameworks, such as Angular.

On the deployed version of your app, the web server hosting it knows only how to serve the one html file it sees (index.html), which corresponds to your root path. The second you try to access directly http://url-to-your-app/art for example, the server will throw a 404 not found, as it does not recognize that as the path of a resource it can serve.

When navigating through your application from within the application itself, it's Angular's routing service that manages the navigation on the client side; the hosting web server does not actually receive requests to serve other web pages than your index.html.Also, this does not happen on dev because you dev web server knows how to manage this.

You have two options:

1. Configure your production web server to always respond with theindex.html whenever it detects a 404 - that way, Angular will always load and its routing service will handle the navigation on the client side.
2. Change your app's locationStrategy to the Hash location strategy as describedhere.However, that would change your app's URLs, and it's not thatdesirable in my opinion.

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

See the hashLocationStrategies usage here:https://codecraft.tv/courses/angular/routing/routing-strategies/#_hashlocationstrategy