预渲染Angular 6（用于SEO）不会将routerLink转换为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.

Answer 1

If I load https://www.fiveabook.com/books directly in my Chrome browser on my Mac and look for that button, I'm not seeing an href there either:

So it looks like we are rendering the page exactly as a normal Chrome browser is rendering it.

Answer 2

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>