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

javascript angularjs templates

43,106

Solution 1

Following are the possible solution 1. check for the correct path. Check the network tab whether you are getting 200 OK 2. check in the sources tab for the html file 3. if you are using webpack then change the templateUrl to template and use require to load the file

Solution 2

The problem is that for some reason your http server can't find template in your working directory.

You can test it directly in browser:

<url>/classificationviewer.html

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

You said, that your other templates are working great, so you can find where are they located in your working directory and place this one at the same location.

43,106

Author by

krs

Updated on June 22, 2020

Comments

krs almost 4 years

So I am trying to load the template in my directive. This directive is reusable. But I am failing to load the template. I have had other templates which are loaded and work properly.

The error that I am getting is :

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

The 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"
    };
});

The template file :

<div>

Hello world

{{artifactClassification}}


</div>

The 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>

user2847643 over 9 years

True that, mind you that templateUrl needs a path from the root of your app.
krs over 9 years

Not sure if I follow. So the template is in a plugin which is used by this project.
user2847643 over 9 years

Yes and note that angular is searching for the .html file at the root of your webapp. If you placed the plugin in a folder somewhere you need to specify the whole path from the root. Say /common/directives/someplugin/classificationviewer.html.
charlietfl over 9 years

@KaranShah you can also put the template html into an ng-template script tag with same ID as templateUrl. If angular finds it there, it won't make ajax request to get it
krs over 9 years

I would do that, but I am not sure why this wont work. It worked for all other templates like the hierarchy/document...
mohi almost 9 years

Did you manage to solve this problem?
krs about 8 years

well I did since it was more than a year ago. Unfortunately i dont remember anything about it now