diff --git a/packages/compiler/src/render3/r3_template_transform.ts b/packages/compiler/src/render3/r3_template_transform.ts index 08ba4b28a1893..ec3e7b6f7f25d 100644 --- a/packages/compiler/src/render3/r3_template_transform.ts +++ b/packages/compiler/src/render3/r3_template_transform.ts @@ -478,6 +478,11 @@ class HtmlAstToIvyAst implements html.Visitor { for (let i = primaryBlockIndex + 1; i < siblings.length; i++) { const node = siblings[i]; + // Skip over comments. + if (node instanceof html.Comment) { + continue; + } + // Ignore empty text nodes between blocks. if (node instanceof html.Text && node.value.trim().length === 0) { // Add the text node to the processed nodes since we don't want diff --git a/packages/compiler/test/render3/r3_template_transform_spec.ts b/packages/compiler/test/render3/r3_template_transform_spec.ts index b1ddfde3094a5..84e2f9b22733a 100644 --- a/packages/compiler/test/render3/r3_template_transform_spec.ts +++ b/packages/compiler/test/render3/r3_template_transform_spec.ts @@ -918,6 +918,25 @@ describe('R3 template transform', () => { ]); }); + it('should parse a deferred block with comments between the connected blocks', () => { + expectFromHtml( + '@defer {}' + + ' @loading {Loading...}' + + ' @placeholder {Placeholder content!}' + + ' @error {Loading failed :(}', + ).toEqual([ + ['DeferredBlock'], + ['Element', 'calendar-cmp'], + ['BoundAttribute', 0, 'date', 'current'], + ['DeferredBlockPlaceholder'], + ['Text', 'Placeholder content!'], + ['DeferredBlockLoading'], + ['Text', 'Loading...'], + ['DeferredBlockError'], + ['Text', 'Loading failed :('], + ]); + }); + it( 'should parse a deferred block with connected blocks that have an arbitrary ' + 'amount of whitespace between them when preserveWhitespaces is enabled', @@ -2070,6 +2089,31 @@ describe('R3 template transform', () => { ]); }); + it('should parse an if block containing comments between the branches', () => { + expectFromHtml(` + @if (cond.expr; as foo) { + Main case was true! + } + + @else if (other.expr) { + Extra case was true! + } + + @else { + False case! + } + `).toEqual([ + ['IfBlock'], + ['IfBlockBranch', 'cond.expr'], + ['Variable', 'foo', 'foo'], + ['Text', ' Main case was true! '], + ['IfBlockBranch', 'other.expr'], + ['Text', ' Extra case was true! '], + ['IfBlockBranch', null], + ['Text', ' False case! '], + ]); + }); + describe('validations', () => { it('should report an if block without a condition', () => { expect(() =>