Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Universal] Buttons are missing the appropriate classes in the server rendered document

See original GitHub issue

Bug, feature request, or proposal:

[ x ] Bug

What is the current behavior?

Buttons are missing the mat-button, mat-raised-button, mat-icon-button, mat-fab, mat-mini-fab class in the server rendered view (only the theming class is present: mat-warn etc.). Therfore, the elements don’t get any styles applied.

What is the expected behavior?

Buttons should have the same classes applied in the server rendered view as when the client bootstraps.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular CLI: 1.6.8
Node: 8.9.4
OS: win32 x64
Angular: 5.2.4
@angular/cdk: 5.2.0
@angular/material: 5.2.0

Is there anything else we should know?

It was working fine with 5.1.0. Haven’t tested on 5.1.1 This happened after updating CDK & Material to 5.2.0

Issue Analytics

State:
Created 6 years ago
Reactions:3
Comments:9 (2 by maintainers)

Top GitHub Comments

2reactions

crisbetocommented, Feb 9, 2018

Should be fixed by #9771.

1reaction

paullryancommented, Mar 11, 2018

@MrCroft I think we all agree, the class solution is a hack and appears to fixed by #9771 I was just asking what the recommended way to work with 5.2.0+ is. I guess I’ll just stick with the class hack for the moment.

Top Results From Across the Web

[Universal] Buttons are missing the appropriate classes in ...

Buttons should have the same classes applied in the server rendered view as when the client bootstraps. Which versions of Angular, Material, OS, ......

Server-side rendering (SSR) with Angular Universal

This guide describes Angular Universal, a technology that renders Angular applications on the server. A normal Angular application executes in the browser, ...

Client side async. requests with server side rendering

1 Answer 1 · you want to do some stuff when user clicks on server-side-rendered button before Angular takes over? · you want...

Angular SEO Done Right with Server-Side Rendering [Live ...

More precisely, we'll be crafting a server-rendered Angular e-commerce SPA using Universal. Here are the steps we'll use to achieve this:.

Universal Javascript in Production - Server/Client Rendering

File and code structure. Now that we've selected our server side web framework, our client side library, and our templating engine, how do...