Angular 18 Nx工作区控制流迁移报错：@switch仅允许@case/@default子节点

错误信息 #

[ngSwitch]: Error: Text node: "
        ◬" would result in invalid migrated @switch block structure. @switch can only have @case or @default as children.

操作步骤 #

• 执行控制流迁移命令：npx nx generate @angular/core:control-flow-migration
• 指定目标组件路径

问题原因 #

1. 空白文本节点干扰：原模板中ngSwitch容器内存在换行、空格等空白文本节点，迁移工具将ngSwitch转为@switch时，@switch要求直接子节点只能是@case或@default，空白文本节点被判定为无效子节点。
2. 非法嵌套结构：原代码外层ngSwitch的直接子节点是*ngFor，违反ngSwitch规范（ngSwitch直接子节点必须是ngSwitchCase/ngSwitchDefault），这种错误结构加剧了迁移工具的文本节点识别问题。

修复方案 #

手动将模板转为Angular 18新控制流语法，修正非法嵌套结构并清理空白文本节点：

@if (!!type) {
  @for (btnType of buttonTypes; track btnType) {
    @if (btnType === type) {
      <button
        style="display: flex"
        [style.flexDirection]="iconPosition === 'right' ? 'row' : 'row-reverse'"
        [ngClass]="buttonClasses[btnType]"
        [disabled]="disabled"
        [type]="htmlType"
        [id]="id"
        [attr.data-test-id]="dataTestId"
        (click)="handleClick($event)">
        @switch (btnType) {
          @default {
            <span><ng-template [ngTemplateOutlet]="ButtonContentRef"></ng-template></span>
            @if (!!icon) {
              <mat-icon
                class="fl-icon"
                [ngClass]="{
                  right: iconPosition === 'right',
                  left: iconPosition === 'left'
                }">
                {{ icon }}
              </mat-icon>
            }
            @if (!!svgIcon && !icon) {
              <mat-icon
                class="fl-icon"
                [svgIcon]="svgIcon"
                [ngClass]="{
                  right: iconPosition === 'right',
                  left: iconPosition === 'left'
                }">
              </mat-icon>
            }
            @if (loading) {
              <span class="loading loading-sm"></span>
            }
          }
          @case (icon) {
            <mat-icon class="fl-icon">{{ icon }}</mat-icon>
            @if (loading) {
              <span class="loading loading-sm"></span>
            }
          }
        }
      </button>
    }
  }
} @else {
  <button
    [class.btn]="!onlyIcon"
    [class.btn-primary]="!onlyIcon && !textButton && !linkButton && !cardButton"
    [class.btn-secondary]="secondary && !textButton && !linkButton && !cardButton"
    [class.btn-destructive]="destructive && !textButton && !linkButton && !cardButton"
    [class.btn-sm]="size === 'small'"
    [class.btn-lg]="size === 'large'"
    [class.btn-floating-primary]="onlyIcon"
    [class.btn-floating-secondary]="onlyIcon && !!secondary"
    [class.btn-floating-destructive]="onlyIcon && !!destructive"
    [class.btn-flat-primary]="textButton"
    [class.btn-flat-secondary]="textButton && secondary"
    [class.btn-flat-destructive]="textButton && destructive"
    [class.btn-plain-primary]="linkButton"
    [class.btn-plain-secondary]="linkButton && secondary"
    [class.btn-plain-destructive]="linkButton && destructive"
    [class.btn-card]="cardButton"
    [class.btn-loading]="loading"
    [ngClass]="className"
    [disabled]="!!disabled"
    [type]="htmlType"
    [id]="id"
    [attr.data-test-id]="dataTestId"
    (click)="handleClick($event)">
    @if (icon && iconPosition !== 'right') {
      <mat-icon class="fl-icon" [ngClass]="iconClassName">{{ icon }}</mat-icon>
    }
    @if (!onlyIcon) {
      <span><ng-template [ngTemplateOutlet]="ButtonContentRef"></ng-template></span>
    }
    @if (icon && iconPosition === 'right') {
      <mat-icon class="fl-icon right" [ngClass]="iconClassName">{{ icon }}</mat-icon>
    }
    @if (loading) {
      <span class="loading loading-sm"></span>
    }
  </button>
}

<ng-template #ButtonContentRef>
  <ng-content></ng-content>
</ng-template>

关键修复点 #

• 用@if/@else替代原*ngIf和else模板结构
• 移除非法的ngSwitch嵌套ngFor结构，改用@for循环+@if判断匹配目标类型
• 将所有ngSwitch系列指令转为新的@switch/@case/@default语法，确保@switch直接子节点仅为合法分支
• 清理所有可能触发报错的空白文本节点
• 将所有*ngIf转为新的@if控制流语法

内容的提问来源于stack exchange，提问作者Alireza Ahmadi