AngularJS Error: error:tplrt Invalid Template Root

directive문으로 html을 삽입을 할 때 삽입되는 template는 root엘리먼트는 하나여야 된다. root엘리먼트에 주석도 있으면 안된다. 왜냐하면 주석(comment)도 엘리먼트의 하나이기 때문이다.

참조 Error: error:tplrt Invalid Template Root

지시문이 템플리트 (또는 templateUrl)로 선언되고 대체 모드가 켜진 
경우 템플리트에는 정확히 하나의 루트 요소가 있어야합니다. 
즉, template 속성의 텍스트 또는 templateUrl에서 참조하는 
내용은 단일 html 요소 내에 포함되어야합니다. 

예를 들어, 단순히 blah <em> blah </ em> blah 대신 
<p> blah <em> blah </ em> blah </ p>입니다. 
그렇지 않으면 대체 작업으로 인해 단일 요소 (지시문)가 여러 요소 
또는 노드로 대체되어 지원되지 않으며 실제로는 필요하지 않습니다.

definition이 있는 지시문의 예

myModule.directive('myDirective', function factory() {
return {
  ...
  replace: true,
  templateUrl: 'someUrl'
  ...
}
});

URL someUrl에서 제공되는 템플릿입니다. 템플릿은이 템플릿의 div 요소와 같이 단일 루트 요소 만있는 html 조각이어야합니다.

<div><b>Hello</b> World!</div>

이 지시문에 사용할 잘못된 템플릿은 여러 루트 노드 또는 요소를 정의하는 템플릿입니다. 예를 들면 다음과 같습니다.

<b>Hello</b> World!

템플릿의 시작 또는 끝 부분에서이 주석이 발생할 수 있으므로 HTML 주석에주의하십시오. 다음 템플릿을 고려하십시오.

<div class='container'>
<div class='wrapper>
   ...
</div> <!-- wrapper -->
</div> <!-- container -->
<!-container-> 주석은 두 번째 루트 요소로 해석되어 템플리트가 유효하지 않게합니다.