Angular refresh the application if the URL is written manually

When you're navigating through the routerLink within Angular, the underlying JavaScript is determining what to serve to the browser. Meaning that when the URL address is changed via the Angular router, it picks up the change and serves the components accordingly.

When you update the URL manually and press enter, it is like going to a new web page. Meaning that the server will need to re-serve the base website, http://localhost:1234, and then the application will handle the route there after, /profile and serve the required component.

I've tried to explain it in a very simplistic way, for a more thorough explanation please check out the Angular docs

When the routerLink is used, the JavaScript changes the URL , i.e., it is not regarded as reload of the web page.

However, when you hit an enter in the address bar, the page is reloaded, i.e., the content is again served from the server which serves the index.html (if you do not have any other HTML defined to be served in place of index) and hence the application reinitializes.

That is why all the components get reloaded.

As suggested by @Wesley, you can refer to the angular docs for more information.

https://angular.io/guide/router

You may explore the below mentioned blog for deployment purpose.

https://arjunphp.com/deploy-angular-app-production-nginx/

The main thing to notice here is try_files $uri $uri/ /index.html =404;. When an enter is hit on the address bar, NGINX first checks if the given URL maps to some file / route on the server. If it does not exist, which in our case localhost:8080/profile, does not as there is no such physical path. Hence, NGINX would serve the /index.html file, which in turn would fetch all JS files which would in turn handle the routing.

If you need to work with the API, you can use NGINX's reverse proxy mechanism to redirect for example, /api/ path to your corresponding server.

you can use

RouterModule.forRoot(
  ROUTES,
  { useHash: true }
)],

The hash will prevent application from reloading. So when you will hit enter on address bar, application will just change the component to display.