Cannot have router-outlet inside root <svg>. Routed component's host element is not svg.

[jorafali]

Hi everybody, this is my first time reporting a bug/ asking for feature un Github. Be kind :)

[x] bug report
[x] feature request
[ ] support request

Current behavior
if I have a parent template defining a root svg tag such as

<svg xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> <xhtml:router-outlet></router-outlet> </svg>

And a routed component's template that looks like

<svg:g> <svg:circle cx=0 cy=0 r="40" stroke="black" stroke-width="3" fill="red" /> </svg:g>

The routed component's host is not define as belonging to svg namespace.

I have tried to with the @component selector property, but to no avail.
For reference the following doesn't work:

@Component({ selector: 'svg:g[my-attr-selector]' }

Note that using svg[my-attr-selector] does render properly (as expected, since svg is valid in html namespace), this might be useful for others with similar problem but different requirements.
Unfortunately it doesn't cut it for me, I need my parent's svg to be the root svg for my routed component.

Expected behavior
Ideally it would be nice to be able to prefix the Component's selector as I have tried.
Or even better would be to have a property in the Component's decorator to tell angular which namespace the host element is supposed to belong to.

Currently: my selector 'svg:g[my-attr-selector]' gets parsed and rendered by angular as just a g tag. Completely cleaning off the prefix.
And that g tag is not an svg element thus none of the content is rendered.

Minimal reproduction of the problem with instructions

Simply drop a router-outlet inside svg tags and route a child component with svg template. This will not work unless the child component's host is svg

What is the motivation / use case for changing the behaviour?
being able to use the power of angular/router anywhere in an app seems pretty compelling to me :)
Details about my implementation and requirements are kind of irrelevant.
But let's just mention that the workarounds I have found are all messy, inelegant, and overall create complexity in my code where a router-outlet would be much better.

Please tell us about your environment:
Mac OSX El capitan

• Angular version:
  angular4.0.0
  angular/router4.0.0

• Browser:
  Chrome latest (59.0.3071.86)

• Language:

• Node (for AoT issues):

[SanderElias]

I don't think this is possible. The problem is that the SVG-tree is XML, and it doesn't support unknown elements. that means if you put the ngOutlet in there, the SVG tree will not render anymore.
If you put the XHTML modifier on the node, it will wrap that node inside a foreignObject. that means that whatever the router puts in there, will be in the HTML subspace, not in the SVG render tree.

The only solution that comes to mind, is to create your own router, using an SVG native element.
I really hope that I'm wrong here because the idea is intriguing, and if it works, it would enable some nice tricks. Charting pops to mind, but some generative art and other fun exersizes become possible also!

[jorafali]

@SanderElias : thanks, Would you have an idea where to start in order to create a custom router ?
I really dislike the way I'm working around that issue so I'd be keen to give that a go.

Unfortunately reading the angular source code is extremely tedious for me (just BTW, anyone knows where to find some docs going a bit more in-depth with regards to what's happening under the hood in angular ? I would really love to read on that.)

In the meantime I'll experiment with extending RouterOutlet with an attribute selector and see if it does it.

[SanderElias]

@jorafali I would start off with forking ngRouterOutlet, and start from there. I suspect you might be able to use the router as is, but with a custom outlet element.

[jasonaden]

Thanks for the first issue! I'm closing based on the discussion with @SanderElias.

[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.}