angularjs Error: [$compile:tpload] Failed to load template

Question

I am trying to build simple routing app in angularjs. I have main index.html page with ng-view div and javascript code for routing. Also 2 simple html pages view2.html and view3.html placed in sub folder partials1. I am getting below error. Please help.

Error: Access is denied. Error: [$compile:tpload] Failed to load template: partials1/view3.html http://errors.angularjs.org/1.3.15/$compile/tpload?p0=partials1%2Fview3.html

• index.html:

  <div data-ng-view></div>
  
  <script src="angular.js"></script>
  <script src="angular-route.js"></script>
  <script type="text/javascript">
      var demoApp = angular.module('demoApp', [ 'ngRoute' ]);
      demoApp.controller('SimpleController', function($scope) {
          $scope.customers = [ {
              name : 'Jon Smith1',
              city : 'Charlotte'
          }, {
              name : 'John Doe',
              city : 'New York'
          }, {
              name : 'Jane Doe',
              city : 'Jacksonville'
          } ];
      });
  
      demoApp.config([ '$routeProvider', function($routeProvider) {
          $routeProvider.when('/view1', {
              templateUrl : 'partials1/view3.html',
              controller : 'SimpleController'
          }).when('/view2', {
              templateUrl : 'partials1/view2.html',
              controller : 'SimpleController'
          }).otherwise({
              redirectTo : '/view1'
          });
      } ]);
  </script>
  

• view2.html

  <div class="container">33333333333333</div>
  

• view3.html

  <div class="container">33333333333333</div>
  

Answer 1

Error: Access is denied tells you that the template is not accessible. Try to open the template in your browser. Something like this: http://my_project/partials1/view3.html. To see the full URL which is used by your app, use a dubug console (XHR tab).

Answer 2

Error: [$compile:tpload] Failed to load template: xyz.html (HTTP status: 404 Not Found)

can be caused by below setting in web.config

 <system.webServer>
    <handlers>
      <remove name="BlockViewHandler"/>
      <add name="BlockViewHandler" path="*" verb="*" preCondition="integratedMode" type="System.Web.HttpNotFoundHandler" />

This causes to block any direct request to the file in Views directory. Angular xhr request to this file is blocked by this.

Comment it out and see if things work. Use this with caution as it allows access to your files.

You can also check on this url for more responses: Error: $compile:tpload failed to load template Http status : 404