Directive template with comment throws multiple root element error because jqLite thinks whitespace after comment is a node #15108
Description
Note: for support questions, please use one of these channels: https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#question. This repository's issues are reserved for feature requests and bug reports.
Do you want to request a feature or report a bug?
Bug
What is the current behavior?
If one tries to load a directive with a top-level comment angular throws an error
Error: [$compile:tplrt] Template for directive 'myDirective' must have exactly one root element
This happens because jqLite thinks that the whitespace between the comment node and html node is a text node. In the removeComments()
function before template invocation, the text template is converted into jqLite object, where the array contains three objects [comment, text, div]
. Only the comment node gets removed and the presence of two remaining nodes throws this error.
I guess this should be fixed in jqLite but for now I have suggested a simple fix (see below after the next question)
Which versions of Angular, and which browser / OS are affected by this issue? Did this work in previous versions of Angular? Please also test with the latest stable and snapshot (https://code.angularjs.org/snapshot/) versions.
Using 1.5.8 in nwjs 0.16.1 on Windows 10
Other information (e.g. stacktraces, related issues, suggestions how to fix)
Change the test in removeComments()
if (node.nodeType === NODE_TYPE_COMMENT)
to
if (node.nodeType === NODE_TYPE_COMMENT || (node.nodeType === NODE_TYPE_TEXT && node.nodeValue.trim() === '' ))