title: Failed to load template ( 404 ) from angular Directive in Typescript class
body: <p>Following is my code for angular Directive written in typescript class.
  When i run the directive in browser. I get error as </p>
  
  <blockquote>
    <p>Failed to load template: ../Templates/inputcontrol.html (HTTP status: 404 Not Found) - Error: $compile:tpload
    Error Loading Template</p>
  </blockquote>
  
  <p>Im using <strong>asp.net mvc</strong></p>
  
  <p><strong>How to set the path or templateUrl in angular ?</strong></p>
  
  <pre><code>&lt;input-control a="shan"&gt;&lt;/input-control&gt;
  </code></pre>
  
  <p>Although the relative path is fine.</p>
  
  <p><a href="https://i.stack.imgur.com/F3LVM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/F3LVM.png" alt="enter image description here"></a></p>
  
  <pre><code>  class InputControl implements ng.IDirective {
      restrict = "E";
      scope = {
          a: "=a"
      };
      templateUrl = "../Templates/inputcontrol.html";       
      controller = ["$scope", ($scope: any) =&gt; {
          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) =&gt; {
          console.log(this.$location);
      };
      static factory(): ng.IDirectiveFactory {
          const directive = ($location: ng.ILocationService) =&gt; new InputControl($location);
          directive.$inject = ["$location"];
          return directive;
      }
  }
  angular.module("SheetApp").directive("inputControl", InputControl.factory());
  </code></pre>