diff --git a/packages/compiler-cli/test/ngtsc/ngtsc_spec.ts b/packages/compiler-cli/test/ngtsc/ngtsc_spec.ts index 8776565186..14dcf54386 100644 --- a/packages/compiler-cli/test/ngtsc/ngtsc_spec.ts +++ b/packages/compiler-cli/test/ngtsc/ngtsc_spec.ts @@ -1834,6 +1834,26 @@ describe('ngtsc behavioral tests', () => { expect(jsContents).toContain('ɵsetClassMetadata(TestPipe, '); }); + it('should not throw in case whitespaces and HTML comments are present inside ', + () => { + env.tsconfig(); + env.write('test.ts', ` + import {Component} from '@angular/core'; + + @Component({ + selector: 'cmp-a', + template: \` + + + + \`, + }) + class CmpA {} + `); + const errors = env.driveDiagnostics(); + expect(errors.length).toBe(0); + }); + it('should compile a template using multiple directives with the same selector', () => { env.tsconfig(); env.write('test.ts', ` diff --git a/packages/compiler/src/render3/r3_template_transform.ts b/packages/compiler/src/render3/r3_template_transform.ts index be274ccf19..fa4bc709fe 100644 --- a/packages/compiler/src/render3/r3_template_transform.ts +++ b/packages/compiler/src/render3/r3_template_transform.ts @@ -156,7 +156,9 @@ class HtmlAstToIvyAst implements html.Visitor { let parsedElement: t.Node|undefined; if (preparsedElement.type === PreparsedElementType.NG_CONTENT) { // `` - if (element.children && !element.children.every(isEmptyTextNode)) { + if (element.children && + !element.children.every( + (node: html.Node) => isEmptyTextNode(node) || isCommentNode(node))) { this.reportError(` element cannot have content.`, element.sourceSpan); } const selector = preparsedElement.selectAttr; @@ -413,3 +415,7 @@ function addEvents(events: ParsedEvent[], boundEvents: t.BoundEvent[]) { function isEmptyTextNode(node: html.Node): boolean { return node instanceof html.Text && node.value.trim().length == 0; } + +function isCommentNode(node: html.Node): boolean { + return node instanceof html.Comment; +}