ng-container element inside an <svg> results in "Template parse errors: ':svg:ng-container' is not a known element"

[DethAriel]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior
the following template:

<svg>
  <ng-container *ngFor="let item of items">
    <my-graphic-content *ngIf="item.valid" [item]="item"></my-graphic-content>
  </ng-container>
</svg>

results in compilation error:

Unhandled Promise rejection: Template parse errors:
':svg:ng-container' is not a known element:
1. If ':svg:ng-container' is an Angular component, then verify that it is part of this module.
2. If ':svg:ng-container' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. 

Expected behavior
Since doesn't affect the markup and only adds the comments, the expected behavior would be successfull template compilation.

Minimal reproduction of the problem with instructions
See this plunk

What is the motivation / use case for changing the behavior?
Making the process of laying out svg components smoother and bug-free

Please tell us about your environment:
npm 4, webpack 2, VSCode, MacOS Sierra

• Angular version: 2.4.5

• Browser: all

• Language: TypeScript 2.0.3

[wolfey]

+1

[pauljohnleonard]

+1

[ReneCode]

when using svg you have to take care with the svg-namespace.
Take a look here: http://blog.500tech.com/svg-in-angular-2/

[BenjaminDobler]

Does anyone have a workaround for this? It really makes constructing svgs with ng components difficult. Right now i wrap them in gs but thats not ideal.

[BenjaminDobler]

@ReneCode but in this case it seems like it`s adding the svg namespace to the angular tag. Is there a way to tell the compiler that this should be an angular tag? I mean there is no ng namespace or?

[ReneCode]

change it to:

<svg>
   <g *ngFor="let item of items">
      <g *ngIf="item.valid" my-graphic-content  [item]="item"></g>
   </g>
</svg>

and change the selector from "my-graphic-content" to "[my-graphic-content]"

the html from my-graphic-content should look like:

<svg:g>
    <text  [attr.x]="item.x"  [attr.y]="item.y">{{item.text}}</text>
</svg:g>

[BenjaminDobler]

This is exactly the workaround i`m doing right now but it would be nicer to not have the extra g tag in there for the enumaration.

[ReneCode]

ok, know I understand.
Yes, a "more compact version" would be fine. Please let me know if you get a better solution. Thanx.

[Sangarlal]

HOW TO USE THE DIV INSIDE THE SVG

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