角$ compile:tpload错误 [英] Angular $compile:tpload error

问题描述

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

I have seen quite a number of similar posts on SO about this error but so far don't think there has been any convincing answer, which is quite surprising given this error seems to be quite common in each version of Angular 1.x.

正式的

尝试使用绝对路径，没有任何区别.

tried to use absolute path and didn't make any difference.

这是完整的错误:

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)

推荐答案

首先；谢谢你的投票！完全应得的:D

First of all; thanks for the downvotes! Totally deserve it:D

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

As said in the original question, there are many similar questions on SO without good/accepted answers. I am posting my way to resolve it here in case it might help someone who, like me, are new to angular.

第二，Phil关于在开发过程中使用未缩小版本的angular的评论很有用，因为它可以提供更好的错误消息.

Secondly, Phil's comment about using un-minified version of angular during development is useful as it gives better error messages.

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

Thirdly, use a browser with better develop tool when learning or developing. This is partially why I got into this error without any clue how to fix it.

最后，出现此错误的真正原因是因为我直接从浏览器中打开 index.html 文件(Microsoft Edge，由于某些原因，Chrome开发者工具在打开后无法打开升级).在Edge中，它只会引发错误，提示 Error:$ compile:tpload .而如果我使用Chrome Canary，它会引发两个错误，第一个错误是说 xmlhttprequest跨源请求仅受协议方案支持:http，https ... 当我打开html文件时这才有意义直接从浏览器.该帖子具有许多解决这个问题的好答案.

Finally, the real reason why I got this error is because I am opening the index.html file directly from a browser (Microsoft Edge, for some reason Chrome developer tool can't be open after an upgrade). In Edge, it only throws the error saying Error: $compile:tpload. Whereas if I use Chrome Canary, it throws two errors and the first errors saying xmlhttprequest Cross Origin requests are only supported for protocol schemes: http, https... This makes sense when I am opening the html file directly from a browser. This post has a number of good answers to resolve this.

简而言之，有两种解决方法:a)使用本地服务器，例如http服务器(如果已安装node.js来呈现html)b)使用 ng-template 指令通过在index.html中的脚本标签内添加模板来包括模板.这就是我为案例添加到index.html的内容

In short, two ways to solve this: a) use a local server e.g. http-server if you have node.js install to render the html b) Use ng-template directive to include the templates by adding the templates inside script tags in the index.html e.g. this is what I added to index.html for my case

<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，例如

Then when configuring the routing, simply use the template id e.g.

 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时，一切都将正常工作.有关更多信息，请参见官方的文档

Then everything will work just fine when opening the html directly from a browser. For more information how this works see the official angular doc

这篇关于角$ compile:tpload错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！