Angular $compile:tpload error

Question

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

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)

can you try replacing relative urls with absolute urls ,just to make sure if it is another issue? — Naga Sai A, Jun 19 '16 at 21:40
can you ping me the complete console error ..just to debug further ... — Naga Sai A, Jun 19 '16 at 21:44
@NagaSaiA how to ping someone on SO? I have added the full error to the question. — dragonfly02, Jun 19 '16 at 21:49
yeah i can see full error message now and to ping some one there is a chat option in SO — Naga Sai A, Jun 19 '16 at 21:52
can you create fiddle or codepen to see the code and debug easily.... i think some error in main.HTML — Naga Sai A, Jun 19 '16 at 21:56
@NagaSaiA how did you determine there is some error in main.html? This is what main.html looks like: `
hello this is {{name}}
` — dragonfly02, Jun 19 '16 at 22:25
If you trying something like this created in plunker - https://plnkr.co/edit/WZ4SHprLM41qnuuEk4g8?p=preview — Naga Sai A, Jun 19 '16 at 22:42
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/115060/discussion-between-naga-sai-a-and-stt106). — Naga Sai A, Jun 19 '16 at 22:43
1) Use the unminified version of Angular for better error messages. 2) Check your browser's *Network* console for the requests for the templates. What URLs are being requested and what is the response? 3) Do you have a `` tag in your `index.html`? — Phil, Jun 20 '16 at 01:29
@Phil thanks for the comments, though it didn't directly fix my problem still find them logically thoughtful! — dragonfly02, Jun 20 '16 at 17:01

score 2 · Accepted Answer · edited May 23 '17 at 10:33

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

Angular $compile:tpload error

hello this is {{name}}

1 Answers1

Linked