角度 $compile:tpload 错误答案

【问题标题】：Angular $compile:tpload error角度 $compile:tpload 错误
【发布时间】：2016-10-21 02:13:36
【问题描述】：

我在 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)

【问题讨论】：

你可以尝试用绝对网址替换相对网址，以确保它是否是另一个问题？
@NagaSaiA 试过了，没有任何作用
你能ping我完整的控制台错误..只是为了进一步调试......
@NagaSaiA 如何在 SO 上 ping 某人？我已将完整的错误添加到问题中。
是的，我现在可以看到完整的错误消息，并且要 ping 某人，SO 中有一个聊天选项

标签： javascript angularjs

【解决方案1】：

首先；感谢您的反对！完全应得的：D

如原始问题所述，关于 SO 的许多类似问题都没有好的/可接受的答案。我在这里发布我的解决方法，以防它可能对像我这样的 Angular 新手有所帮助。

其次，Phil 关于在开发过程中使用未缩小版本的 Angular 的评论很有用，因为它提供了更好的错误消息。

第三，在学习或开发时使用开发工具更好的浏览器。这也是我在不知道如何解决的情况下遇到此错误的部分原因。

最后，我得到这个错误的真正原因是因为我直接从浏览器打开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.html 的内容

<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 时，一切都会正常工作。有关其工作原理的更多信息，请参阅官方 angular doc

【讨论】：