错误：$compile:tpload 未能加载模板 Http 状态：404答案

【问题标题】：Error: $compile:tpload failed to load template Http status : 404错误：$compile:tpload 未能加载模板 Http 状态：404
【发布时间】：2015-08-25 15:27:20
【问题描述】：

当我尝试使用 Angular 运行本地项目时，我从 Chrome 获得 404 状态。我不确定问题出在哪里，我已经尝试过类似问题的建议答案。

这是我的指令文件：

'use strict';

/**
 * @ngdoc directive
 * @name stockDogApp.directive:stkWatchlistPanel
 * @description
 * # stkWatchlistPanel
 */
angular.module('stockDogApp')
  .directive('stkWatchlistPanel', function ($location, $modal, WatchlistService) {
    return {
      templateUrl: 'views/templates/watchlist-panel.html',
      restrict: 'E',
      scope : {},
      link: function($scope){
        $scope.watchlist = {};
        var addListModal = $modal({
          scope : $scope,
          template: 'views/templates/addlist-modal.html',
          show : false

        });

        $scope.watchlists = WatchlistService.query();

        $scope.showModal = function(){
          addListModal.$promise.then(addListModal.show);
        };
        $scope.createList = function(){
          WatchlistService.save($scope.watchlist);
          addListModal.hide();
          $scope.watchlist = {};
        };
        $scope.deleteList = function(list){
          WatchlistService.remove(list);
          $location.path('/');
        };
      }
    };
  });

这是我的“应用”文件夹的树形视图

|-- 404.html
|-- favicon.ico
|-- images
|   `-- yeoman.png
|-- index.html
|-- robots.txt
|-- scripts
|   |-- app.js
|   |-- controllers
|   |-- directives
|   |   `-- stk-watchlist-panel.js
|   `-- services
|       `-- watchlist-service.js
|-- styles
|   `-- main.css
`-- views
    `-- templates
        |-- addlist-modal.html
        `-- watchlist‐panel.html

当我在控制台中加载 index.html 时出现页面未找到错误。

Error: [$compile:tpload] Failed to load template: views/templates/watchlist-panel.html (HTTP status: 404 Not Found)
http://errors.angularjs.org/1.4.4/$compile/tpload?p0=views%2Ftemplates%2Fwatchlist-panel.html&p1=404&p2=Not%20Found

我也尝试从根文件夹输入完整路径，但它仍然没有检测到页面。

我不确定这是否是原因，但查看 chrome 开发人员工具显示源选项卡中没有 app 文件夹（它只显示 'bower_components'、'scripts' 、'styles' 和 index .html

**更新**

看来，angular 看不到的唯一文件夹是 app 中的 views 文件夹。我不确定问题出在哪里。 grunt会不会有问题？

ngtemplates: {
  dist: {
    options: {
      module: 'stockDogApp',
      htmlmin: '<%= htmlmin.dist.options %>',
      usemin: 'scripts/scripts.js'
    },
    cwd: '<%= yeoman.app %>',
    src: 'views/{,*/}*.html',
    dest: '.tmp/templateCache.js'
  }
},

【问题讨论】：

这是在运行缩小代码吗？还是只是运行“grunt serve”？
你解决了吗，因为如果你解决了我就卡在它上面
只是重新重写了整个东西..由于某些奇怪的原因工作得很好
你是怎么解决这个问题的？ :S
@IvanCoronado - 只是再次重写了整个文件.. 然后它工作了：S ...所以我不确定我到底哪里出错了

标签： javascript angularjs gruntjs bower

【解决方案1】：

我猜是因为你写的是template: 'views/templates/addlist-modal.html'而不是templateUrl: 'views/templates/addlist-modal.html'

【讨论】：

【解决方案2】：

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

可能是由 web.config 中的以下设置引起的

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

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

评论一下，看看是否有效。请谨慎使用，因为它允许访问您的文件。

【讨论】：

【解决方案3】：

我刚刚将您的指令粘贴到我的工作应用程序中，它运行良好。你停止并开始咕噜咕噜吗？第 16 页的注释可能解释了为什么没有动态拾取目录。

【讨论】：

【解决方案4】：

聚会迟到了，但可能对某些人有用。
在我的情况下，这是因为指令的 url 和 $templateCache:
中的字母大小写不同指令中的路径：

templateUrl: 'somedirectory/somefile.html'

$templateCache 中的路径：

$templateCache.put('someDirectory/somefile.html', 'html template here...');

某人。

【讨论】：