SVG component rendered through ComponentFactoryResolver / ViewContainerRef doesn't show up

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

When I dynamically render an SVG component through ComponentFactoryResolver into a ViewContainerRef, the browser doesn’t render anything.

Expected behavior

Dynamically rendered SVG components should be visible.

Minimal reproduction of the problem with instructions

http://plnkr.co/edit/qAOHEmlQFuXjlUwAojJF?p=preview There’s only one red square when the SVG component is rendered with a component selector. There’s no square when the SVG component is dynamically instantiated. Looking at the DOM, the only difference is the comment tag from the ng-template:

What is the motivation / use case for changing the behavior?

Environment

Angular version: 5.0.[01]


Browser:
- [x ] Chrome (desktop) version XX
- [? ] Chrome (Android) version XX
- [? ] Chrome (iOS) version XX
- [? ] Firefox version XX
- [? ] Safari (desktop) version XX
- [? ] Safari (iOS) version XX
- [? ] IE version XX
- [x ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

[alexzuza]

The main problem here is that Angular selector can’t contain namespace for creating element https://github.com/angular/angular/blob/f8096d499324cf0961f092944bbaedd05364eea1/packages/compiler/src/selector.ts#L11-L21

The following selector

selector: 'svg:g[child]',

will be parsed to

<g child></g> not to <svg:g child></g>

As a result Angular will use document.createElement instead of document.createElementNS to create new element.

If we use selector like svg[child] then it will be parsed to <svg child> but for svg tag Angular provided namespace manually

https://github.com/angular/angular/blob/018477e2c4a31de69554c377ed25ba291636050a/packages/compiler/src/ml_parser/html_tags.ts#L85

Angular executes the following steps during html creation:

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
document.body.appendChild(svg);

const comment = document.createComment('');
svg.appendChild(comment);

const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');

const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('x', '50%');
text.setAttribute('y', '50%');
g.appendChild(text);

const textNode = document.createTextNode('Hello');
text.appendChild(textNode);

svg.insertBefore(g, null);

https://jsfiddle.net/76x9kfm4/

But with only one difference

Instead of

const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');

It uses

const g = document.createElement('g');

since there is no namespace provided.

As a result svg is not rendered correctly https://jsfiddle.net/w9syoape/

[dgroh]

any workaround while this is the milestone? this is crucial for our project.