Why does a link load so much slower when using href instead of routerLink with angular 2+?

Question

I am building a webapplication with angular 2 that uses routes. Because i'm new to angular I used to link to another component with the href attribute like so:

<a href="localhost:4200/database/seed/1">link</a>

This works but this approach also makes the component take a whopping 3 and a half seconds to load!

When i do it the routerLink way like so:

<a [routerLink]="['/database/seed/',1]">link</a>

It takes under half a second to load. I was wondering why this is so, both approaches basically do the same thing. They link to another page. Can anyone explain what causes the difference in loading speed? Thank you

Answer 1

Using href is causing your entire website to be reloaded.

When you use Angular's router, base components do not need to be reloaded (index.html, styles.css, app.component.html, etc.).