<ng-template> with [ngIf] does not render SVG content

[baarney]

🐞 bug report

Affected Package

Probably @angular/core ?

Is this a regression?

Don't know

Description

When using an <ng-template> in the non-asterisk longhand form to render SVG fragments, neither the main template nor the else template are rendered:

    // component
    test=true;
  
    // template
    <svg width="200" height="80">
      <text x="0" y="20">SVG Test</text>
      <ng-template [ngIf]="test" [ngIfElse]="svgElse">
        <text x="0" y="40">SVG Test True</text>
      </ng-template>
      <ng-template #svgElse>
        <text x="0" y="40">SVG Test False</text>
      </ng-template>
    </svg>

    // rendered output
    <svg _ngcontent-gar-c204="" width="200" height="80">
      <text _ngcontent-gar-c204="" x="0" y="20">SVG Test</text>
      <!--container-->
      <!--container-->
    </svg>

Note that using <ng-container> with the structural *ngIf form does work:

    <svg width="200" height="80">
      <text x="0" y="20">SVG Test</text>
      <ng-container *ngIf="test else svg2Else">
        <text x="0" y="40">SVG Test True</text>
      </ng-container>
      <ng-template #svg2Else>
        <text x="0" y="40">SVG Test False</text>
      </ng-template>
    </svg>

Given other issues I've had with svg, I've tried both with and without svg: namespace prefixes on the child svg elements. Seems to exhibit the same behaviour in both cases.

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-ivy-kpeerk

🌍 Your Environment

Angular Version:

Angular CLI: 11.2.2
Node: 14.15.5
OS: linux x64

Angular: 11.2.3
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.7
@angular-devkit/build-angular   0.1102.2
@angular-devkit/core            11.2.2
@angular-devkit/schematics      11.2.2
@angular/cdk                    11.2.2
@angular/cli                    11.2.2
@schematics/angular             11.2.2
@schematics/update              0.1102.2
rxjs                            6.6.6
typescript                      4.1.5
 

Anything else relevant?

[jelbourn]

Expanded StackBlitz: https://stackblitz.com/edit/angular-ivy-bwuaql?file=src%2Fapp%2Fapp.component.ts

Confirmed that this looks looks to be a real bug

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