ng generate @angular/core:control-flow migration removes the container reference even if it is used in component file #56565
Description
Which @angular/* package(s) are the source of the bug?
core
Is this a regression?
Yes
Description
when I run angular control flow migration, it removes the template reference from html which is being used in component.ts file too
original code -
import { NgIf } from '@angular/common';
import {
Component,
TemplateRef,
ViewChild,
ViewContainerRef,
viewChild,
} from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
@Component({
selector: 'app-root',
standalone: true,
imports: [NgIf],
template: `
<h1>Hello from {{ name }}!</h1>
<div *ngIf="showContent; then contentTemplate"></div>
<ng-template #contentTemplate>
<div>test content</div>
</ng-template>
`,
})
export class App {
@ViewChild('contentTemplate') testContainer!: TemplateRef<unknown>;
name = 'Angular';
showContent = true;
options: { value: string; html: any }[] = [];
constructor(private viewContainerRef: ViewContainerRef) {}
ngAfterViewInit(): void {
this.viewContainerRef.createEmbeddedView(this.testContainer);
}
}
bootstrapApplication(App);
after migration -
import {
Component,
TemplateRef,
ViewChild,
ViewContainerRef,
viewChild,
} from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
@Component({
selector: 'app-root',
standalone: true,
imports: [],
template: `
<h1>Hello from {{ name }}!</h1>
@if (showContent) {
<div>test content</div>
}
`,
})
export class App {
@ViewChild('contentTemplate') testContainer!: TemplateRef<unknown>;
name = 'Angular';
showContent = true;
options: { value: string; html: any }[] = [];
constructor(private viewContainerRef: ViewContainerRef) {}
ngAfterViewInit(): void {
this.viewContainerRef.createEmbeddedView(this.testContainer);
}
}
bootstrapApplication(App);
stackblitz link for original code - https://stackblitz.com/edit/stackblitz-starters-dkwaqy?file=src%2Fmain.ts
stackblitz link after migration - https://stackblitz.com/edit/stackblitz-starters-27pd5u?file=src%2Fmain.ts
Please provide a link to a minimal reproduction of the bug
https://stackblitz.com/edit/stackblitz-starters-27pd5u?file=src%2Fmain.ts
Please provide the exception or error you saw
No response
Please provide the environment you discovered this bug in (run ng version)
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / | | | | |/ _ | '__| | | | | | |
/ ___ | | | | (| | || | | (| | | | || | | |
// __| ||_, |_,||_,|| _|||
|___/
Angular CLI: 18.0.5
Node: 18.20.3
Package Manager: npm 10.2.3
OS: linux x64
Angular: 18.0.4
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, router
Package Version
@angular-devkit/architect 0.1800.5
@angular-devkit/build-angular 18.0.5
@angular-devkit/core 18.0.5
@angular-devkit/schematics 18.0.5
@angular/cli 18.0.5
@schematics/angular 18.0.5
rxjs 7.8.1
typescript 5.4.5
zone.js 0.14.7
Anything else?
No response