Javascript angularjs 错误：[$compile:tpload] 无法加载模板

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

提问by Santo

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.

我正在尝试在 angularjs 中构建简单的路由应用程序。我有带有 ng-view div 和用于路由的 javascript 代码的主 index.html 页面。还有2个简单的html页面view2.html和view3.html放在子文件夹partials1中。我得到低于错误。请帮忙。

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

错误：访问被拒绝。错误：[$compile:tpload] 无法加载模板：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 : 'Hymansonville'
          } ];
      });
  
      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>
  

• 索引.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 : 'Hymansonville'
          } ];
      });
  
      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>
  

• 视图2.html

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

• 视图3.html

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

回答by Kanstantsin Kamkou

Error: Access is deniedtells 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).

Error: Access is denied告诉您模板不可访问。尝试在浏览器中打开模板。像这样：http://my_project/partials1/view3.html。要查看您的应用程序使用的完整 URL，请使用 dubug 控制台（XHR 选项卡）。

回答by Ashish

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

can be caused by below setting in web.config

可能是由 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.

这会导致阻止对 Views 目录中文件的任何直接请求。对此文件的 Angular xhr 请求被阻止。

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

您还可以查看此 url 以获取更多响应：错误：$compile:tpload failed to load template Http status : 404

回答by learango

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.

我遇到了同样的错误，在我的情况下，Web 服务器是用节点 js 编写的，而用于获取 $stateProvider 指定路径中的视图的 uri 没有被创建，因为对于每个想要显示 http 请求的视图/模板Xhr GET 类型。

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)

由于 uri 不存在，我获得了 404 代码，这使浏览器进入了杀死他的回调。确保您的服务器正在返回请求的视图。（用谷歌翻译翻译）

回答by Suamere

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.

就我而言，问题是我添加了默认标头，例如 Accept = 'application/json'。所以我的路由突然停止工作，因为这些标头不仅应用于我的 $http.post 调用，它们还应用于我的路由......？奇怪的。