[Universal] NAMESPACE_ERR (14): the operation is not allowed by Namespaces in XML

[feimosi]

When using it with Angular Universal I get the following error on the server:

ERROR { NAMESPACE_ERR: NAMESPACE_ERR (14): the operation is not allowed by Namespaces in XML
  code: 14,
  message: 'NAMESPACE_ERR (14): the operation is not allowed by Namespaces in XML',
  name: 'NAMESPACE_ERR' }

Enclosing the <round-progress> inside *ngIf="isPlatformBrowser" doesn't help at all. This may be related: angular/material2#7866

[oleersoy]

If you remove this block from RoundProgressiveService does it still throw?:

    this.supportsSvg = !!(
      document &&
      document.createElementNS &&
      document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect
    );

[feimosi]

Yes, still the same error.

[oleersoy]

Seems more like a problem with Angular Universal than with this component. I wonder if Angular Universal is attempting to schema check the template before it is compiled, so it's seeing things like getPathTransform() and saying "HEY YAO - We don't know anything about this!".

I could also be that it just blows up for svg in general. If that's the case then any valid SVG like the goey spinner should blow it up. Could try replacing the template in the component with this:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 21 -7"/>
    </filter>
  </defs>
</svg>

If the build works with that as the template then at least we are a little closer to knowing what's causing it. Could also try with bare svg like this:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
</svg>

[crisbeto]

AFAIK that only happens when setting the xmlns through a template. It's most likely throwing because of this instance in particular.

[oleersoy]

This demo runs in chrome with both the xmlns and version attributes removed from the svg element. I can check on SO if they are required when declaring inline svg elements if need be.

So if you remove the xmlns and version attributes, does the build work?

[feimosi]

Could try replacing the template in the component with this:

So if you remove the xmlns and version attributes, does the build work?

I've just tried the snippet from above and I can confirm:

• with xmlns and version it fails,
• without those attributes, everything renders properly.

[oleersoy]

The attributes are optional for inlined svg so it should be fine to remove them.

[CaerusKaru]

This is a duplicate of https://github.com/angular/angular/issues/21196. It will be resolved with https://github.com/angular/angular/issues/22263