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

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