Angular 16迁移至17：如何将*ngFor、*ngIf等替换为新语法？

一、官方自动迁移工具 #

这是最稳妥的替换方式，能避免手动替换可能出现的误匹配问题：

• 先升级Angular CLI到17版本：npm install -g @angular/cli@latest
• 在项目根目录执行专属迁移命令：ng update @angular/core@17 --migrate-only=a17-template-control-flow
  该命令会自动扫描所有.html模板文件，将符合条件的*ngFor、*ngIf、ngSwitch批量转换为@for、@if、@switch新语法，还能正确处理*ngIf else这类分支场景的转换逻辑。

二、正则表达式替换（自定义场景补充） #

如果需要手动处理遗漏场景或自定义替换规则，可以在VS Code等编辑器的全局替换功能中使用以下正则，替换前建议先备份文件：

1. *ngIf 转 @if #

• 基础单分支场景：
  • 查找正则：\*ngIf="([^"]+)"
  • 替换内容：@if ($1) {
• 带else分支场景：
  • 先匹配带else的ngIf：\*ngIf="([^"]+); else (\w+)"
  • 替换为：@if ($1) {
  • 再找到对应的<ng-template #elseBlock>，将模板内容移到} @else {的大括号内，删除原ng-template标签

2. *ngFor 转 @for #

• 基础遍历场景：
  • 查找正则：\*ngFor="let (\w+) of ([^"]+)"
  • 替换内容：@for ($1 of $2; track $1) {
• 带索引的遍历场景：
  • 查找正则：\*ngFor="let (\w+) of ([^"]+); let (\w+) = index"
  • 替换内容：@for ($1 of $2; track $1; let $3 = index) {
• 注意：新语法强制要求track表达式，若原*ngFor无trackBy，默认用track $item即可；需自定义跟踪逻辑的话，改成track $item.id这类格式。

3. ngSwitch 转 @switch #

• 替换ngSwitch容器：
  • 查找正则：\[ngSwitch\]="([^"]+)"
  • 替换内容：@switch ($1) {
• 替换ngSwitchCase：
  • 查找正则：\*ngSwitchCase="([^"]+)"
  • 替换内容：@case ($1) {
• 替换ngSwitchDefault：
  • 查找正则：\*ngSwitchDefault
  • 替换内容：@default {
• 注意：需要将原ngSwitch容器内的内容用大括号包裹，把ngSwitchCase/Default对应的标签内容移到@case/@default的大括号中，删除原ng-template标签（若使用了的话）。

三、替换后必做检查 #

• 确保所有新语法的大括号{}正确闭合，编辑器会提示语法错误，及时修复即可。
• 嵌套控制流场景无需再额外使用<ng-container>，可直接嵌套@for/@if。
• 核对track表达式的正确性，避免因跟踪逻辑变化引发性能问题。
• 执行ng build或ng serve，确认无模板编译错误。

内容的提问来源于stack exchange，提问作者Mahdi Zarei