All geek questions in one place

Angular JS Error: $ compile: tpload: Failed to load template:

So, I am trying to load a template in my directive. This directive is reusable. But I can not load the template. I had other templates that loaded and worked correctly.

the error i get is:

GET /ClassificationToolkitForGrails/classificationviewer.html 404 (Not Found) angular.js:8521 Error: [$compile:tpload] Failed to load template: classificationviewer.html

A javascript file containing the directive:

 /** * */ var classificationViewModule = angular.module('ald.classificationview',[]); classificationViewModule.factory('classificationAPI',function(){ return { getClassification:function($http, artifactId){ //TODO add URL var url = "/Classification/getInfo?artifactId="+artifactId return $http({ method: 'GET', url: url }); } }; }); /*classificationViewModule.controller('testclassification',['$scope','$http',function($scope,$http){ $http.get("/Classification/getInfo?artifactId=6450").success(function(data){ $scope.classification = data; }) }]);*/ classificationViewModule.directive('classificationview', function () { return { restrict: 'EA', scope: {}, replace: true, link: function ($scope, element, attributes) { }, controller: function ($scope, $http, classificationAPI) { classificationAPI.getClassification($http).success(function(data,status){ //TODO $scope.artifactClassification = data; }).error(function(data,status){ if (404==status){ alert("no text"); } else { alert("bad stuff!"); } }); }, //TODO add template url templateUrl: "classificationviewer.html" }; });

File Template :

 <div> Hello world {{artifactClassification}} </div>

Index.html file:

 < !DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="layout" content="main"/> <title>Classification Toolkit for Grails</title> <script type="text/javascript"> angular.module('classtoolkitApp', [ 'ald.classificationview' ]).controller('index', function ($scope) { }); </script> <asset:javascript src="ald/classificationview/classificationview.js"/> </head> <body > <div ng-app="classtoolkitApp" ng-controller="index"> classification <classificationview artifactId=6450/> </div> </body> </html>
+6
source share
2 answers

The problem is that for some reason your HTTP server cannot find the template in your working directory.

You can check it directly in the browser:

 <url>/classificationviewer.html

And you should see 404 NOT FOUND , which means this template was not found.

You said that your other templates work fine, so you can find where they are in your working directory and put them in one place.

+3
source

The following is a possible solution 1. Verify that the path is correct. Check the network tab, whether you get 200 OK 2. Check the sources tab for html file 3. If you are using webpack, change the template templateUrl to the template and use require to download the file

+2
source

Source: https://habr.com/ru/post/975303/

More articles:


All Articles