Skip to content

mat-form-field: Outline appearance not compatible with Universal/SSR #10715

Closed
@kherock

Description

@kherock

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Outlined form fields shouldn't hinder rendering in Universal applications.

What is the current behavior?

Server middleware fails with this error:

TypeError: this._connectionContainerRef.nativeElement.getBoundingClientRect is not a function
    at MatFormField.updateOutlineGap (d:\Workspace\a-typical-blog\node_modules\@angular\material\bundles\material-form-field.umd.js:701:112)
    at d:\Workspace\a-typical-blog\node_modules\@angular\material\bundles\material-form-field.umd.js:459:19

What are the steps to reproduce?

Placing a <mat-form-field appearance="outline"> element with a label should trigger the error since it doesn't seem like getBoundingClientRect() is supported on the server platform.

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

Currently on Angular 6.0.0-rc.1 and Angular Material 6.0.0-rc.0

Is there anything else we should know?

To get this far I had to work around #10586 and angular/universal#844 before I could get SSR working consistently.

Metadata

Metadata

Assignees

Labels

P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions