Universal: SVG in template causes server side error

Created on 15 Dec 2016 · 6Comments · Source: angular/universal

Note: for support questions, please use one of these channels: https://github.com/angular/universal/blob/master/CONTRIBUTING.md#question. This repository's issues are reserved for feature requests and bug reports. Also, Preboot has moved to https://github.com/angular/preboot - please make preboot-related issues there.

I'm submitting a ...
[X] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, see note at the top of this template.
What modules are related to this Issue?
[ ] express-engine
[ ] grunt-prerender
[ ] gulp-prerender
[ ] hapi-engine
[ ] universal-next
[X] universal
[ ] webpack-prerender
Do you want to request a feature or report a bug?
I'm reporting a bug
What is the current behavior?
I'm using an svg in my template which renders fine in the browser but gives an error on the server of

EXCEPTION: Uncaught (in promise): Error: Error in ./SectionComponent class SectionComponent - inline template:10:6 caused by: This method is not implemented in Parse5DomAdapter: setAttributeNS
Error: This method is not implemented in Parse5DomAdapter: setAttributeNS

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem by creating a github repo.

    <svg class="read-more-icon dark">
      <use xlink:href="assets/svg/sprite.svg#read-more" />
    </svg>

What is the expected behavior?
Being able to use svg without any errors
Please tell us about your environment:
Angular version: 2.1.0
Browser: [all ]
Language: [TypeScript 2.0.3 ]
OS: [all | Mac OS X | Windows | Linux ]
Platform: [NodeJs]

Source

dottodot

👍6

Most helpful comment

Workaround is to set the attribute on the native element using a template reference. Handling the native element different on node and browser:

template:
<use #useref xlink:href="assets/svg/sprite.svg#read-more" />

component:

import { isNode, isBrowser } from 'angular2-universal';
...
  constructor(private _renderer: Renderer) { }

  @ViewChild('useref') svgUseField: ElementRef;
...

ngOnInit() {
    let href = 'assets/svg/sprite.svg#read-more';
    let el = this.svgUseField.nativeElement
    if (isNode) this._renderer.setElementAttribute(el, 'xlink:href', href);  // node
    if (isBrowser) el.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', href); // browser
}

rowantervelde on 4 Jan 2017

👍2

All 6 comments

Similar issue is mentioned in universal-starter repo angular/universal-starter#287

Reuvenc on 15 Dec 2016

👍1

Any news about new release which resolves this issue?

neilhem on 23 Dec 2016

Workaround is to set the attribute on the native element using a template reference. Handling the native element different on node and browser:

template:
<use #useref xlink:href="assets/svg/sprite.svg#read-more" />

component:

import { isNode, isBrowser } from 'angular2-universal';
...
  constructor(private _renderer: Renderer) { }

  @ViewChild('useref') svgUseField: ElementRef;
...

ngOnInit() {
    let href = 'assets/svg/sprite.svg#read-more';
    let el = this.svgUseField.nativeElement
    if (isNode) this._renderer.setElementAttribute(el, 'xlink:href', href);  // node
    if (isBrowser) el.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', href); // browser
}

rowantervelde on 4 Jan 2017

👍2

I can confirm that solution works.

dottodot on 5 Jan 2017

might be fixed in ng4
https://github.com/angular/angular/issues/13822