Angular $ compile：tpload错误

Question

我已经在SO上看过很多关于这个错误的类似帖子，但到目前为止还没有认为有任何令人信服的答案，这是非常令人惊讶的，因为这个错误似乎在Angular 1的每个版本中都很常见。 X。

官方角doc表明模板路径可能拼写错误，但不认为是这种情况;我附上了文件夹结构的照片。路由到main.html和second.html

时出现此错误

EDIT1：尝试使用绝对路径并没有任何区别。

EDIT2：这是完整的错误：

Error: [$compile:tpload] http://errors.angularjs.org/1.5.6/$compile/tpload?p0=%2Fpage%2Fsecond.html&p1=-1&p2=
   at Anonymous function (https://code.angularjs.org/1.5.6/angular.min.js:156:275)
   at Anonymous function (https://code.angularjs.org/1.5.6/angular.min.js:130:399)
   at m.prototype.$eval (https://code.angularjs.org/1.5.6/angular.min.js:145:96)
   at m.prototype.$digest (https://code.angularjs.org/1.5.6/angular.min.js:142:158)
   at m.prototype.$apply (https://code.angularjs.org/1.5.6/angular.min.js:145:399)
   at l (https://code.angularjs.org/1.5.6/angular.min.js:97:233)
   at D (https://code.angularjs.org/1.5.6/angular.min.js:101:373)
   at e (https://code.angularjs.org/1.5.6/angular.min.js:102:448)
angular.js (13642,11)

Answer 1

首先;感谢downvotes！完全配得上：D

如原始问题中所述，在没有良好/可接受的答案的情况下，有很多类似的问题。我正在发布我的方法来解决它，以防它可能会帮助像我这样的人有点角色。

其次，Phil关于在开发过程中使用非缩小版角度的评论很有用，因为它可以提供更好的错误信息。

第三，在学习或开发时使用具有更好开发工具的浏览器。这就是为什么我在没有任何线索如何解决它的情况下陷入此错误的原因。

最后，我收到此错误的真正原因是因为我直接从浏览器打开index.html文件（Microsoft Edge，出于某种原因，升级后Chrome开发人员工具无法打开） 。在Edge中，它只会抛出错误Error: $compile:tpload。如果我使用Chrome Canary，它会抛出两个错误，第一个错误说xmlhttprequest Cross Origin requests are only supported for protocol schemes: http, https...当我直接从浏览器打开html文件时，这是有道理的。这个post有很多好的答案可以解决这个问题。

简而言之，有两种解决方法：a）使用本地服务器，例如： http-server如果你有node.js安装来渲染html b）使用ng-template指令通过在index.html中添加脚本标记内的模板来包含模板，例如这是我为index +添加到我的案例

<script type="text/ng-template" id="main.html">
        This is {{name}} 
</script>
<script type="text/ng-template" id="second.html">
        This is {{name}} 
</script>

然后在配置路由时，只需使用模板ID，例如

 app.config(function ($routeProvider) {
        $routeProvider.when('/', {
            templateUrl: "main.html", //NOTE: use included template id
            controller: 'mainCtrl'
        })
        .when('/second', {
            templateUrl : 'second.html',
            controller : 'secondCtrl'
        })
        .otherwise({redirectTo : '/'});
    })

然后，当直接从浏览器打开html时，一切都会正常工作。有关其工作原理的更多信息，请参阅官方角度doc