angularJs : ng-template inside ng-include

I have lot of small template, so i put them in a single html file.

smallTemlates.html

<script type="text/ng-template" id="template1.html">
...
</script>
<script type="text/ng-template" id="template2.html">
...
</script>

then i include smallTemlates.html inside index.html.

index.html

  <body  ng-app="myapp" id="my-app">
      <div ng-include="'pathTo/smallTemlates.html'"></div>
</body>

then i tried to access these templates inside my controller/service using $templateRequest, but it is throwing 404 error.

  $templateRequest(component.popoverTemplateUrl).then(function(html) {  
     var template = html // 404 error
  });

but if i added these template direclty into index.html like below it works just fine.

 <body  ng-app="myapp" id="my-app">
<script type="text/ng-template" id="template1.html">
...
</script>
<script type="text/ng-template" id="template2.html">
...
</script>
</body>

Solution

You should use $templateCache instead of $templateRequest, because you don't need to make another request for template. ng-include already does this by default.

You have to wait for next digest to get the content for template:

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope,$templateCache,$timeout) {

  $timeout(function(){
    var template = $templateCache.get('smallTemlates.html').then(function(html){
        console.log("smallTemlates");
        console.log(html.data); 
       $timeout(function(){
           var template1 = $templateCache.get('template1.html');
             console.log("template1");
             console.log(template1); 
       });
    });

  });
});

Html:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
 <link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

   <div ng-include="'smallTemlates.html'"></div>
</div>

</body>

smallTemplates.html

<script type="text/ng-template" id="template1.html">
template1zzasdfasdf
</script>
<script type="text/ng-template" id="template2.html">
template2
</script>

Plunker Link here (check console for the results)