Failed to load template ( 404 ) from angular Directive in Typescript class

3
votes

Following is my code for angular Directive written in typescript class. When i run the directive in browser. I get error as

Failed to load template: ../Templates/inputcontrol.html (HTTP status: 404 Not Found) - Error: $compile:tpload Error Loading Template

Im using asp.net mvc

How to set the path or templateUrl in angular ?

<input-control a="shan"></input-control>

Although the relative path is fine.

enter image description here

  class InputControl implements ng.IDirective {
    restrict = "E";
    scope = {
        a: "=a"
    };
    templateUrl = "../Templates/inputcontrol.html";       
    controller = ["$scope", ($scope: any) => {
        console.log("this this controller", $scope.a);
    }];
    controllerAs = "inputcontroller";
  constructor(private $location: ng.ILocationService) {
    }
    link = (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes, ctrl: any) => {
        console.log(this.$location);
    };
    static factory(): ng.IDirectiveFactory {
        const directive = ($location: ng.ILocationService) => new InputControl($location);
        directive.$inject = ["$location"];
        return directive;
    }
}
angular.module("SheetApp").directive("inputControl", InputControl.factory());
3
javascriptangularjsasp.net-mvcangularjs-directivetypescript

3 Answers

2
votes

Don't use relative pathing - rather, path according to how you'd expect to retrieve the element from your server if you were doing a Get request.

Assuming AngularApp is at the top level of your project (same tree-indentation as say the Controllers or Scripts folders are by default), use the following for your templateURL rather than relative pathing.

"/AngularApp/Templates/main.html"

0
votes

I made it work by changing the code like this.

class InputControl implements ng.IDirective {


    restrict = "E";
    scope = {
        a: "="
    };
    templateUrl = "";
    controller = ["$scope", ($scope: any) => {
        console.log("this this controller", $scope.a);
    }];

    controllerAs = "inputcontroller";

    constructor(private $location: ng.ILocationService , private $sce:ng.ISCEService) {
        var a : InputControl = this;
        a.templateUrl=$sce.trustAsUrl("http://"+window.location.host +"/AngularApp/Templates/inputcontrol.html");
    }

    link = (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes, ctrl: any) => {
        console.log(this.$location);
    };

    static factory(): ng.IDirectiveFactory {
        const directive = ($location: ng.ILocationService , $sce : ng.ISCEService) => new InputControl($location,$sce);
        directive.$inject = ["$location","$sce"];
        return directive;
    }
}

angular.module("SheetApp").directive("inputControl", InputControl.factory());
0
votes

It's worked for me when I changed only:

templateUrl: "http://" + window.location.host + "/AngularApp/Templates/inputcontrol.html"