How to access $templateCache from the console

Question

I want to check the content of the $templateCache by accessing it from the devtool's console.

I tried the solution given at: https://stackoverflow.com/a/24711132.

This didn't work for me.

How can i do that?

Answer 1

I tried this approach just now and get a defined template:

This is my predefined template:

<script type="text/ng-template" id="template.html">
    <div class="modal-content">
        <div class="modal-header">
        </div>
        <div class="modal-body">
        </div>
        <div class="modal-footer">
        </div>
    </div>
</script>

On the Chrome devtools console (supposed name of your application is "ng-app"):

> var ngAppElem = angular.element(document.querySelector('[ng-app]') || document);
> ngAppElem.injector().get('$templateCache').get('template.html')
> "
        <div class="modal-content">
            <div class="modal-header">
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
            </div>
        </div>
  "
> 

I got help from this snippet: https://gist.github.com/mzgol/7893061

Answer 2

One-liner for lazy people:

angular.element(document.body).injector().get('$templateCache').get('<your/file.html or key>')