CODEWITHSUNDEEP
javascriptangularjs
dragonfly02
dragonfly02

Reputation: 3669

Angular $compile:tpload error

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.

The official angular doc suggests the template path is probably misspelled but don't think that's the case; I have attached a photo of the folder structure. I get this error when routing to both main.html and second.html enter image description here

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

EDIT2: Here is the full error:

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)

Upvotes: 0

Views: 1668

Answers (1)

dragonfly02
dragonfly02

Reputation: 3669

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

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.

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.

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.

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>

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 : '/'});
    })

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

Upvotes: 2

Related Questions