title: Error: $compile:tpload failed to load template Http status : 404
body: <p>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. </p>
  
  <p>This is my directives file:</p>
  
  <pre><code>'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('/');
          };
        }
      };
    });
  </code></pre>
  
  <p>This is the tree view of my 'app' folder</p>
  
  <pre><code>|-- 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
  </code></pre>
  
  <p>I'm getting a page not found error when i load index.html in my console.</p>
  
  <pre><code>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&amp;p1=404&amp;p2=Not%20Found
  </code></pre>
  
  <p>I also tried entering the full path from the root folder but its still not detecting the page. </p>
  
  <p>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</p>
  
  <p>**update **</p>
  
  <p>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?</p>
  
  <pre><code>ngtemplates: {
    dist: {
      options: {
        module: 'stockDogApp',
        htmlmin: '&lt;%= htmlmin.dist.options %&gt;',
        usemin: 'scripts/scripts.js'
      },
      cwd: '&lt;%= yeoman.app %&gt;',
      src: 'views/{,*/}*.html',
      dest: '.tmp/templateCache.js'
    }
  },
  </code></pre>