Issue
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="..."
- To avoid that, use
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.
Answered By - akop
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.