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

Question

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

Is this running the minified code? Or just running 'grunt serve'? — Diné Bennett, Oct 23 '15 at 08:02
just rewrote the entire thing again .. worked fine then for some odd reason — Jayaram, Jan 09 '16 at 11:50
@IvanCoronado - just rewrote the entire file again .. it worked then :S ... so i'm unsure where i exactly went wrong — Jayaram, Feb 06 '16 at 09:39

score 2 · Answer 1 · edited Jan 12 '18 at 13:58

2

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

edited Jan 12 '18 at 13:58

CommonSenseCode

23,522
33
131
186

answered Feb 23 '16 at 16:10

Bogdan Adrian

512
1
4
10

score 1 · Answer 2 · answered Dec 08 '16 at 15:13

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.

score 0 · Answer 3 · answered Sep 06 '16 at 13:58

0

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.

answered Sep 06 '16 at 13:58

user1585561

11
1

score 0 · Answer 4 · answered Jan 09 '20 at 13:54

Late to the party, but might be useful to some.
In my case it was because of difference in letter casing in the url of the directive and the $templateCache:
The path in the directive:

templateUrl: 'somedirectory/somefile.html'

The path in $templateCache:

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

HTH someone.

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

4 Answers4

Linked