CODEWITHSUNDEEP
javascriptangularjsgruntjsbower
Jayaram
Jayaram

Reputation: 6606

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

Upvotes: 4

Views: 12032

Answers (4)

ashilon
ashilon

Reputation: 1951

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.

Upvotes: 0

Bogdan Adrian
Bogdan Adrian

Reputation: 512

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

Upvotes: 2

Ashish
Ashish

Reputation: 21

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.

Upvotes: 1

user1585561
user1585561

Reputation: 11

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.

Upvotes: 0

Related Questions