Angular $compile:tpload Error
Solution 1:
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
Post a Comment for "Angular $compile:tpload Error"