错误：$ compile：tpload无法加载模板Http状态：404 [英] Error: $compile:tpload failed to load template Http status : 404

问题描述

当我尝试使用角度来运行本地项目时，我从Chrome获得404状态。我不确定问题所在，我已经尝试了类似问题的建议答案。

这是我的指令文件：

 'use strict'; 
 $ b / ** 
 * @ngdoc指令
 * @name stockDogApp.directive：stkWatchlistPanel 
 * @description 
 *＃stkWatchlistPanel 
 * / 
 angular.module（'stockDogApp'）
 .directive（'stkWatchlistPanel'，函数（$ 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）; 
 addListM odal.hide（）; 
 $ scope.watchlist = {}; 
}; 
 $ scope.deleteList = function（list）{
 WatchlistService.remove（list）; 
 $ location.path（'/'）; 
}; 
} 
}; 
}）; 
  

这是我的'app'文件夹的树状图

  |  -  404.html 
 |  -  favicon.ico 
 |  - 图像
 | ` -  yeoman.png 
 |  -  index.html 
 |  -  robots.txt 
 |  - 脚本
 | |  -  app.js 
 | |  - 控制器
 | |  - 指令
 | | ` -  stk-watchlist-panel.js 
 | ` - 服务
 | ` -  watchlist-service.js 
 |  - 样式
 | ` -  main.css 
` -  views 
` - 模板
 |  -  addlist-modal.html 
` -  watchlist-panel.html 
  

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

 错误：[$ compile：tpload]无法加载模板：views / templates / watchlist-panel.html（HTTP状态：404未找到）
 http://errors.angularjs.org/1.4.4/$compile/tpload?p0=views%2Ftemplates%2Fwatchlist-panel.html&p1=404&p2=Not%20Found 
  

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

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

**更新**

它似乎角度看不到的唯一文件夹是应用程序中的views文件夹，我不确定问题出在哪里。可能会出现grunt问题吗？

  ngtemplates：{
 dist：{
 options：{
 module：'stockDogApp'，
 htmlmin：'<％= htmlmin.dist.options ％>'，
 usemin：'scripts / scripts.js'
}，
 cwd：'<％= yeoman.app％>'，
 src：' / b，b / b，b，b，b，b， pre> 
 
解决方案
我猜这是因为你写了 template：'views / templates / addlist-modal。 html'而不是 t emplateUrl：'views / templates / addlist-modal.html' 
 
I'm getting a 404 status from Chrome when i'm trying to run a local project using angular. I'm not sure where the problem is and i've already tried the suggested answers to similar questions. 

This is my directives file:
'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('/');
        };
      }
    };
  });
This is the tree view of my 'app' folder
|-- 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
I'm getting a page not found error when i load index.html in my console.
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
I also tried entering the full path from the root folder but its still not detecting the page. 

I'm not sure if this is the cause , but a look at chrome developer tools shows that the source tab doesnt have an app folder in it (it only shows 'bower_components','scripts' , 'styles' and index.html

**update **

it appears that the only folder which angular cannot see is the views folder in app. I'm unsure where the problem lies. Could there be a problem with grunt?
ngtemplates: {
  dist: {
    options: {
      module: 'stockDogApp',
      htmlmin: '<%= htmlmin.dist.options %>',
      usemin: 'scripts/scripts.js'
    },
    cwd: '<%= yeoman.app %>',
    src: 'views/{,*/}*.html',
    dest: '.tmp/templateCache.js'
  }
},

解决方案
I guess it was because you wrote template: 'views/templates/addlist-modal.html' instead of templateUrl: 'views/templates/addlist-modal.html'

                        
这篇关于错误：$ compile：tpload无法加载模板Http状态：404的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！