错误：[$compile:tplrt] 指令模板必须只有一个根元素答案

【问题标题】：Error: [$compile:tplrt] Template for directive must have exactly one root element错误：[$compile:tplrt] 指令模板必须只有一个根元素
【发布时间】：2018-09-09 21:32:07
【问题描述】：

我知道这个问题以前被问过很多次，我通读了答案，尝试了提供的解决方案，但我仍然收到错误，我不知道为什么。我将我的应用程序简化为一个简单的 hello world，试图找出它发生的原因。

            <!--index.html -->
                <!DOCTYPE html>
            <html lang="en" ng-app="app">
            <head> 
                    <script
                    src="https://code.jquery.com/jquery-3.3.1.min.js"
                    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
                    crossorigin="anonymous"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.js"></script>
            <script type="text/javascript" 
            src="./controller/MainController.ctrl.js"></script>

            </head>
            <body >
                <div ng-controller="HelloController">
                    <test-dir/>
                </div>
            </body>
            </html>

             //controller/MainController.ctrl.js
             var app = angular.module('app',[]);
             app.controller("HelloController", function($scope) {
             });

              app.directive('testDir', function (){
             return {
                restrict:'E',
                replace:true,
                template:`template/helloWorld.template.html`
             };
          });

   <!--template/helloWorld.template.html -->
   <div>
       <h1>hello, is it me you're looking for</h1>
   </div>

【问题讨论】：

使用 templateUrl 代替模板选项。

标签： angularjs angularjs-directive

【解决方案1】：

如果您提供模板文件的链接，您应该使用templateUrl 而不是template。

如果你想使用template你必须写

"template":"<div>...</div>"

【讨论】：

【解决方案2】：

从模板更改为templateUrl

`template:`template/helloWorld.template.html`

到

templateUrl :template/helloWorld.template.html

【讨论】：

当我使用 templateUrl 时，我两次收到此错误错误：[$compile:tpload] 无法加载模板：模板/helloWorld.template.html（HTTP 状态：-1）以及跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https。