Geek Answers Handbook

Error: $ compile: tpload could not load the template. Http status: 404

I get 404 status from Chrome when I try to run a local project using angular. I am not sure where the problem is, and I have 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 folder 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 get a page error message when I load index.html into 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 to enter the full path from the root folder, but still did not find this page.

I'm not sure if this is the reason, but look at the Chrome developer tools showing that the source tab does not contain the application folder (it only shows "bower_components", "scripts", "styles" and index.html

** update **

it looks like the only folder that angular cannot see is the views folder in the application. I do not know where the problem is. Could there be a grunt problem?

 ngtemplates: { dist: { options: { module: 'stockDogApp', htmlmin: '<%= htmlmin.dist.options %>', usemin: 'scripts/scripts.js' }, cwd: '<%= yeoman.app %>', src: 'views/{,*/}*.html', dest: '.tmp/templateCache.js' } },
0
source share
3 answers

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

+2
source

I just inserted your directive into my working application, and everything turned out fine. Have you stopped and started grunting? The note on page 16 may explain why the directory was not selected dynamically.

0
source 
 Error: [$compile:tpload] Failed to load template: xyz.html (HTTP status: 404 Not Found)

may be caused by the installation below in web.config

  <system.webServer> <handlers> <remove name="BlockViewHandler"/> <add name="BlockViewHandler" path="*" verb="*" preCondition="integratedMode" type="System.Web.HttpNotFoundHandler" />

This blocks any direct request to the file in the Views directory. Angular xhr request to this file is blocked by this.

Comment on this and see if everything works. Use this with caution, as it provides access to your files.

0
source

More articles:


All Articles