Control Flow Migration does not work correctly on template #53779
Description
Which @angular/* package(s) are the source of the bug?
core
Is this a regression?
Yes
Description
Running control flow migration on the following template does not work correctly.
Original Template:
<ng-container *ngIf="generic; else specific">
<ng-container [ngSwitch]="dueWhen">
<ng-container *ngSwitchCase="due.NOW">
<div class="alert alert-danger generic" [template]="tooltip" trTemplateTooltip position="centre-end">
Required Information
</div>
</ng-container>
<ng-container *ngSwitchCase="due.SOON">
<div class="alert alert-warning generic" [template]="tooltip" trTemplateTooltip position="centre-end">
Information Required Soon
</div>
</ng-container>
<ng-container *ngSwitchDefault></ng-container>
</ng-container>
</ng-container>
<ng-template #specific>
<ng-container [ngSwitch]="dueWhen">
<ng-container *ngSwitchCase="due.NOW">
<div
class="alert alert-danger"
matTooltip="Stripe requires this information immediately to verify your account.">
Required Now
</div>
</ng-container>
<ng-container *ngSwitchCase="due.SOON">
<div class="alert alert-warning" matTooltip="Stripe may require this information in the future.">
Required Soon
</div>
</ng-container>
<ng-container *ngSwitchDefault>
<div class="trellis-p" [ngClass]="{ 'text-muted': !value && !overrideValue }">
{{ value && !overrideValue ? value : altValue }}
</div>
</ng-container>
</ng-container>
</ng-template>
<ng-template #tooltip>
<tr-stripe-banking-missing-info [account]="account"></tr-stripe-banking-missing-info>
</ng-template>Migrates to:
@if (generic) {
@switch (dueWhen) {
@case (due.NOW) {
<div class="alert alert-danger generic" [template]="tooltip" trTemplateTooltip position="centre-end">
Required Information
</div>
}
@case (due.SOON) {
<div class="alert alert-warning generic" [template]="tooltip" trTemplateTooltip position="centre-end">
Information Required Soon
</div>
}
@default {}
}
} @else {
@switch (dueWhen) {
@case (due.NOW) {
">
<div
class="alert alert-danger"
matTooltip="Stripe requires this information immediately to verify your account.">
Required Now
</div>
}
r>
@case (due.SOON) {
">
<div class="alert alert-warning" matTooltip="Stripe may require this information in the future.">
Required Soon
</div>
}
r>
@default {
t>
<div class="trellis-p" [ngClass]="{ 'text-muted': !value && !overrideValue }">
{{ value && !overrideValue ? value : altValue }}
</div>
}
r>
}
}
<ng-template #tooltip>
<tr-stripe-banking-missing-info [account]="account"></tr-stripe-banking-missing-info>
</ng-template>Please provide a link to a minimal reproduction of the bug
No response
Please provide the exception or error you saw
No response
Please provide the environment you discovered this bug in (run ng version)
No response
Anything else?
No response