Inline `ng-template` not found` ng-include`

Question

I have a view loaded by inline text/ng-template , which is not in ng-include later in the file. The script block is at the very top of the file:

 <script type="text/ng-template" id="stringCondition"> <!-- template guts --> </script> 

What I upload later in the file:

 <ng-include src="'stringCondition'"></ng-include> 

But produces a 404 error in the console:

 GET http://localhost/~me/stringCondition 404 (Not Found) 

I tried several options for naming (e.g. having .html at the end) and using ng-include as an attribute instead of a high level element. All without luck.

What can lead to the fact that the built-in ng-template will not be registered with ng-include in the same file of the form?

UPDATE:

As comments and answers point out, the basic design of my code is correct. But something causes ng-template (apparently) the inability to make the template available to the system.

I updated my code to extract from an HTML file (instead of an inline template) and it works great.

Is there a general situation that I could work with that breaks ng-template ?

Answer 1

 <div ng-app> <script type="text/ng-template" id="stringCondition"> Yes, yes it did. </script> Did it work? <ng-include src="'stringCondition'"></ng-include> </div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 

I had the same issue and ran into this post. Now I can see what causes this problem, so hopefully this will help someone else with this problem.

The reason rgthree code works is because the script tag for text / ng-template must live within the ng application. So it’s good to have the template in a separate .js file, but just make sure that when it is displayed on the HTML page, it is in the ng application, otherwise angular will not know about it and will try to download it from the server.

Answer 2

Everything seems to be in order. Perhaps you have something else outside of your sample code.

 <div ng-app> <script type="text/ng-template" id="stringCondition"> Yes, yes it did. </script> Did it work? <ng-include src="'stringCondition'"></ng-include> </div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>