Angular JS Erreur: $compiler:tpload: Échec du chargement de modèle:

Donc je suis en train de charger le modèle dans mon directive. Cette directive est réutilisable. Mais je suis l'échec du chargement du modèle. J'ai eu d'autres modèles qui sont chargés et le travail correctement.

La erreur que je reçois est :

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

La javascript fichier contenant la 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"
    };
});

La modèle fichier :

<div>

Hello world

{{artifactClassification}}


</div>

La index.html fichier :

<

!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>
Vrai que, vous l'esprit que templateUrl a besoin d'un chemin de la racine de votre application.
Vous ne savez pas si je l'ai suivi. Si le modèle est dans un plugin qui est utilisé par ce projet.
Oui et note que angulaire est la recherche de la .fichier html à la racine de votre webapp. Si vous avez placé le plugin dans un dossier quelque part, vous devez spécifier le chemin complet depuis la racine. Dire /common/directives/someplugin/classificationviewer.html.
vous pouvez aussi mettre le modèle html dans un ng-template balise de script avec le même ID que templateUrl. Si angulaire trouve, il est là, il ne fera pas à une requête ajax pour l'obtenir
Avez-vous réussi à résoudre ce problème?

OriginalL'auteur krs | 2014-09-15

  1. 3

    Le problème est que, pour une raison quelconque, votre serveur http ne peut pas trouver de modèle dans votre répertoire de travail.

    Vous pouvez tester directement dans le navigateur:

    <url>/classificationviewer.html

    Et vous devriez voir 404 NOT FOUND, ce qui signifie que ce modèle n'a pas été trouvé.

    Vous l'avez dit, vos modèles sont vraiment génial de travailler, de sorte que vous pouvez trouver où sont-ils situés dans votre répertoire de travail et de lieu de celui-ci à la même emplacement.

    OriginalL'auteur alexey

  2. 2

    Possibles sont les suivantes solution
    1. vérifiez le chemin d'accès correct. Vérifiez l'onglet réseau si vous obtenez 200 OK
    2. vérifiez dans l'onglet sources pour le fichier html
    3. si vous utilisez webpack puis changer le templateUrl de modèle et l'utiliser besoin pour charger le fichier

    OriginalL'auteur Arun Giri

  3. 0

    si vous utilisez votre système local, ne fonctionne pas. utiliser l'angle de la charge du serveur le fichier
    étape pour résoudre votre problème
    1.ouvrir l'invite de cmd et tapez npm install-g http-server
    2. Dans cmd tapez cd (votre projet chemin d'accès au dossier) comme: cd desktop/app/entraînement puis
    3. maintenant, dans votre chemin d'accès au dossier type http-server-o cette commande servir votre page locale sur l'angle sur votre serveur local meachine

    OriginalL'auteur utkarsh singh