mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
Suraj Yadav
5ad8231397
The control flow migration determines whether an `*ngIf` uses a `then` and/or `else` clause by regex matching the raw microsyntax string for the literal keywords `then`/`else`. The regexes only checked that the keyword was preceded by a non-word character, but not that it was followed by one. As a result, a template reference name that merely starts with `then` (e.g. `else thenBlock`) or `else` was misidentified as the `then`/`else` keyword itself. This caused the migration to take the wrong code path (e.g. then+else instead of else-only), which in turn made `getTemplateName()` compute a `slice(start, end)` with `start > end`, producing an empty template name. That empty placeholder was never resolved and was silently emitted as an invalid `<ng-template [ngTemplateOutlet]=""></ng-template>`, dropping the original template content without any warning. Add a negative lookahead `(?![\w\d])` to both regexes so `then`/`else` are only matched as whole keywords, not as a prefix of a longer template reference name. Fixes #69914
Control Flow Syntax migration
Angular v17 introduces a new control flow syntax. This migration replaces the
existing usages of *ngIf, *ngFor, and *ngSwitch to their equivalent block
syntax. Existing ng-templates are preserved in case they are used elsewhere in
the template. It has the following option:
path- Relative path within the project that the migration should apply to. Can be used to migrate specific sub-directories individually. Defaults to the project root.
Before
import {Component} from '@angular/core';
@Component({
template: `<div><span *ngIf="show">Content here</span></div>`,
})
export class MyComp {
show = false;
}
After
import {Component} from '@angular/core';
@Component({
template: `<div>
@if (show) {
<span>Content here</span>
}
</div>`,
})
export class MyComp {
show = false;
}