[Angular Universal] mat-datepicker-toggle at SVGSVGElement.setAttribute - the operation is not allowed by Namespaces in XML\nNAMESPACE_ERR

[patrickmichalina]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Calendar renders server side

What is the current behavior?

using

<mat-form-field>
      <input matInput [matDatepicker]="picker" placeholder="Date">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>

throws

Uncaught (in promise): NAMESPACE_ERR: NAMESPACE_ERR (14): the operation is not allowed by Namespaces in XML\nNAMESPACE_ERR: NAMESPACE_ERR (14): the operation is not allowed by Namespaces in XML\n    at Object.exports.NamespaceError (/Users/Patrick/Repos/myapft/node_modules/domino/lib/utils.js:28:45)\n    at SVGSVGElement.setAttribute 

What are the steps to reproduce?

Use the above snippet in any universal applications

What is the use-case or motivation for changing an existing behavior?

to support server side rendering

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

"@angular/animations": "5.0.0-rc.2",
"@angular/cdk": "^2.0.0-beta.12",
"@angular/common": "5.0.0-rc.2",
"@angular/compiler": "5.0.0-rc.2",
"@angular/compiler-cli": "5.0.0-rc.2",
"@angular/core": "5.0.0-rc.2",
"@angular/flex-layout": "2.0.0-rc.1",
"@angular/forms": "5.0.0-rc.2",
"@angular/http": "5.0.0-rc.2",
"@angular/material": "^2.0.0-beta.12",
"@angular/platform-browser": "5.0.0-rc.2",
"@angular/platform-browser-dynamic": "5.0.0-rc.2",
"@angular/platform-server": "5.0.0-rc.2",
"@angular/router": "5.0.0-rc.2",
"@angular/service-worker": "5.0.0-rc.2",

[crisbeto]

Sounds like something I ran into in one of the Angular 5 betas. Are you running Angular 5?

[patrickmichalina]

@crisbeto yes sorry my versions are:

"@angular/animations": "5.0.0-rc.2",
    "@angular/cdk": "^2.0.0-beta.12",
    "@angular/common": "5.0.0-rc.2",
    "@angular/compiler": "5.0.0-rc.2",
    "@angular/compiler-cli": "5.0.0-rc.2",
    "@angular/core": "5.0.0-rc.2",
    "@angular/flex-layout": "2.0.0-rc.1",
    "@angular/forms": "5.0.0-rc.2",
    "@angular/http": "5.0.0-rc.2",
    "@angular/material": "^2.0.0-beta.12",
    "@angular/platform-browser": "5.0.0-rc.2",
    "@angular/platform-browser-dynamic": "5.0.0-rc.2",
    "@angular/platform-server": "5.0.0-rc.2",
    "@angular/router": "5.0.0-rc.2",
    "@angular/service-worker": "5.0.0-rc.2",

[patrickmichalina]

My current work around is to NOT use mat-datepicker-toggle

[hamedbaatour]

Angular 5 is officially released now and I can confirm that this issue is still present with angular universal. Any updates on this?

[patrickmichalina]

@hamedbaatour looks like it hasn't been merged in yet

#7882

[crisbeto]

The fix was merged as a part of another PR (#6018).

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}