diff --git a/packages/compiler/src/render3/r3_control_flow.ts b/packages/compiler/src/render3/r3_control_flow.ts index 5bacb2c5fcac0..09228c1b451c3 100644 --- a/packages/compiler/src/render3/r3_control_flow.ts +++ b/packages/compiler/src/render3/r3_control_flow.ts @@ -338,8 +338,10 @@ function validateSwitchBlock(ast: html.Block): ParseError[] { } for (const node of ast.children) { - // Skip over empty text nodes inside the switch block since they can be used for formatting. - if (node instanceof html.Text && node.value.trim().length === 0) { + // Skip over comments and empty text nodes inside the switch block. + // Empty text nodes can be used for formatting while comments don't affect the runtime. + if (node instanceof html.Comment || + (node instanceof html.Text && node.value.trim().length === 0)) { continue; } diff --git a/packages/compiler/test/render3/r3_template_transform_spec.ts b/packages/compiler/test/render3/r3_template_transform_spec.ts index 224119a151d48..0c17a70cf112c 100644 --- a/packages/compiler/test/render3/r3_template_transform_spec.ts +++ b/packages/compiler/test/render3/r3_template_transform_spec.ts @@ -1364,6 +1364,24 @@ describe('R3 template transform', () => { ]); }); + it('should parse a switch block containing comments', () => { + expectFromHtml(` + @switch (cond.kind) { + + @case (x) { X case } + + + @default { No case matched } + } + `).toEqual([ + ['SwitchBlock', 'cond.kind'], + ['SwitchBlockCase', 'x'], + ['Text', ' X case '], + ['SwitchBlockCase', null], + ['Text', ' No case matched '], + ]); + }); + describe('validations', () => { it('should report syntax error in switch expression', () => { expect(() => parse(`