Prerendering Angular 6 (for SEO) does not translate routerLink to Href

Question

I am using prerender.io to render angular 6 pages using headless chrome. The problem is that the renderer does not render the router links and the link information gets lost.

This is especially problematic, given that the purpose of rendering is SEO.

For example, a button with [routerLink]="previewLink", will be rendered to a button with no router link.

Here is a live example

rendered page with no links

https://prerender.io/raw-html?url=https%3A%2F%2Fwww.fiveabook.com%2Fbooks&adaptiveType=desktop

No href and no router link in the "Preview" buttons:

<button _ngcontent-c12="" color="accent" mat-button="" tabindex="0" class="mat-button mat-accent ng-star-inserted"><span class="mat-button-wrapper">

angular page with router links

https://www.fiveabook.com/books

The buttons have dynamically generated router links.

Initiallly, the question was in regards to href links. However, the buttons don't have href links. Nevertheless, the rendered does not render the router links in the Preview buttons so I am not sure if googlebot can see where the buttons link to.

You are right. However, they also don't have router links in the rendered version. Does that mean the link information is lost? — Ioannis Tsiokos
The path associated to the routerLink is stored internally, and the URL is generated and accessed on click of the button — Jota.Toledo
Shouldn't that mean that when we click on the Preview button in the rendered page, we should visit the url? (just as it works on the live page) — Ioannis Tsiokos
See angular.io/api/router/RouterLink and angular.io/api/router/RouterLinkWithHref — Jota.Toledo

Jota.Toledo Jota.Toledo · Accepted Answer · 2019-04-01T08:26:01

Html buttons dont have a href attribute. Simply use an anchor element if you want to generate a hyperlink button.

<a mat-button [routerLink]="...">
Link
</a>

Prerendering Angular 6 (for SEO) does not translate routerLink to Href

2 Answers