mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
fix(core): do not remove used ng-template nodes in control flow migration (#52186)
This fixes an issue where `ng-template` nodes were removed even when used in other places than control flow directives. Template to migrate: ```html <ng-template #blockUsedElsewhere><div>Block</div></ng-template> <ng-container *ngTemplateOutlet="blockUsedElsewhere"></ng-container> ``` Before: ```html <ng-container *ngTemplateOutlet="blockUsedElsewhere"></ng-container> ``` After: ```html <ng-template #blockUsedElsewhere><div>Block</div></ng-template> <ng-container *ngTemplateOutlet="blockUsedElsewhere"></ng-container> ``` PR Close #52186
This commit is contained in:
committed by
Pawel Kozlowski
parent
c121d3992a
commit
20e7e21679
@@ -175,7 +175,7 @@ export function migrateTemplate(template: string): {migrated: string|null, error
|
||||
}
|
||||
|
||||
for (const [_, t] of visitor.templates) {
|
||||
if (t.count === 2) {
|
||||
if (t.count < 2) {
|
||||
result = result.replace(t.contents, '');
|
||||
}
|
||||
}
|
||||
@@ -282,6 +282,9 @@ function buildIfElseBlock(
|
||||
offset = offset + etm.preOffset(startBlock.length) +
|
||||
etm.postOffset(mainBlock.length + postBlock.length);
|
||||
|
||||
// decrease usage count of elseTmpl
|
||||
elseTmpl.count--;
|
||||
|
||||
return {tmpl: updatedTmpl, offset};
|
||||
}
|
||||
|
||||
@@ -306,6 +309,10 @@ function buildIfThenElseBlock(
|
||||
|
||||
offset = offset + etm.preOffset(startBlock.length) + etm.postOffset(postBlock.length);
|
||||
|
||||
// decrease usage count of thenTmpl and elseTmpl
|
||||
thenTmpl.count--;
|
||||
elseTmpl.count--;
|
||||
|
||||
return {tmpl: updatedTmpl, offset};
|
||||
}
|
||||
|
||||
|
||||
@@ -336,6 +336,33 @@ describe('control flow migration', () => {
|
||||
`<ng-container *ngTemplateOutlet="elseBlock"></ng-container>`,
|
||||
].join('\n'));
|
||||
});
|
||||
|
||||
it('should not remove ng-templates used by other directives', async () => {
|
||||
writeFile('/comp.ts', `
|
||||
import {Component} from '@angular/core';
|
||||
import {NgIf} from '@angular/common';
|
||||
|
||||
@Component({
|
||||
templateUrl: './comp.html'
|
||||
})
|
||||
class Comp {
|
||||
show = false;
|
||||
}
|
||||
`);
|
||||
|
||||
writeFile('/comp.html', [
|
||||
`<ng-template #blockUsedElsewhere><div>Block</div></ng-template>`,
|
||||
`<ng-container *ngTemplateOutlet="blockUsedElsewhere"></ng-container>`,
|
||||
].join('\n'));
|
||||
|
||||
await runMigration();
|
||||
const content = tree.readContent('/comp.html');
|
||||
|
||||
expect(content).toBe([
|
||||
`<ng-template #blockUsedElsewhere><div>Block</div></ng-template>`,
|
||||
`<ng-container *ngTemplateOutlet="blockUsedElsewhere"></ng-container>`,
|
||||
].join('\n'));
|
||||
});
|
||||
});
|
||||
|
||||
describe('ngFor', () => {
|
||||
|
||||
Reference in New Issue
Block a user