Why same resources of an angular application are requested again and again while navigating in browsers

I am developing an angular app whose navigation involves both a href=<path> and Router.navigate(<path>). These paths are the same paths for both cases and are made available by the Routes object from '@angular/router'.

When testing the production bundle with lite-server, I observed that navigations by Router.navigate(<path>) didn't reload the app from the the server, but by a href=<path> reloaded the same resources (html, css, js) again from the server every time a link is requested:

23.11.08 07:09:08 304 GET /index.html
23.11.08 07:09:08 304 GET /runtime.a21fa0e74120b058.js
23.11.08 07:09:08 304 GET /styles.1a9c5f20325d5bf3.css
23.11.08 07:09:08 304 GET /polyfills.79549cd2e9d6a624.js
23.11.08 07:09:08 304 GET /scripts.813213362642cfa0.js
23.11.08 07:09:09 304 GET /main.f20979467e129436.js
23.11.08 07:09:09 304 GET /index.html
23.11.08 07:09:09 304 GET /runtime.a21fa0e74120b058.js
23.11.08 07:09:09 304 GET /polyfills.79549cd2e9d6a624.js
23.11.08 07:09:09 304 GET /main.f20979467e129436.js
23.11.08 07:09:09 304 GET /scripts.813213362642cfa0.js
23.11.08 07:09:09 304 GET /styles.1a9c5f20325d5bf3.css

Should a href=<path> be NOT used or what did I do wrong? I also wonder if the question / answer is relevant not only for angular but also for any single-page application framework?

Solution

As wrote by Jaykant

Navigating via Router.navigate() is client-side
Opening link will cause a server call
- To avoid that, use <a routerLink="..." instead of <a href="..."

But, this is not bad with the correct caching-settings.
Per default - ALL RESSOURCES (except index.html) should be cached forever. The client should not reload them.
This possible because of the hash in the filename (like runtime.a21fa0e74120b058.js)

See Angular Server Configuration Docs

Edit

Your issues have nothing to do with the base url.