Error: $compile:tpload failed to load template Http status : 404

问题

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'
  }
},

回答1:

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

回答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.

回答3:

I just pasted your directive into my working app and it ran fine. Did you stop and start grunt? Note on page 16 might explain why the directory wasn't picked up dynamically.

来源：https://stackoverflow.com/questions/32208067/error-compiletpload-failed-to-load-template-http-status-404

标签

javascript

angularjs

gruntjs

bower