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

Answer 3

In my case, the issue is that I added Default Headers such as Accept = 'application/json'. So my routes suddenly stopped working, because those headers were not only applied to my $http.post calls, they were also applied to my Routing... ? Weird.

Answer 4

I had the same error, in my case the web server was written with node js and the uri to get views that were in the specified path with $stateProvider was not created, since for each view/template that is wanted to display an http request of type Xhr GET is made.

As the uri did not exist I obtained a 404 code and this made the browser got into callback that killed him. Make sure your server is returning the requested view. (Translated with google translate)

Answer 5

"Error: [$compile:tpload]"

I solved this problem. I deployed site on IIS.

for using source: https://www.c-sharpcorner.com/UploadFile/11d5d2/how-to-deploy-Asp-Net-website-in-iis-on-localhost/