Angular $templateCache Does Not Work in Internet Explorer

Question

I am having an issue with Angular's $templateCache in ie10 specifically, but is also an issue in ie11. It works in Firefox, Chrome and Safari.

Here is my template definition, in templates.js:

angular.module('app').run(['$templateCache', function($templateCache) {
  'use strict';

  $templateCache.put('/views/page.html',
    "<div class=\"page-header row\">\n" +
    "  <div class=\"col-xs-6\">\n" +
    "    <span class=\"heading title\">{{pageTitle}}</span>\n"
    ...
  );
}]);

I include the templates.js at the top of the page in the <head> , like:

<script src="/js/templates.js"></script>

And finally I consume the templates in my routes definition, here:

angular.module('app', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when('/', {
      redirectTo:'/page'
    })
    .when('/page', {
      controller: 'pageController',
      templateUrl:'/views/page.html'
    })
    .otherwise({
      redirectTo:'/'
    });
}]);

Again, it all works fine in Chrome, Firefox and Safari, but not IE10. The only other information I can think to provide is that the app is not at the root level, it is http://example.com/app . but the templates are indeed stored in http://example.com/views .

Any ideas?

EDIT: Here is a JSFiddle which actually works in IE, but I'm not sure if that's because of how JSFiddle handles the browser frame. If you copy and paste the code into an index.html, and run it on your server, it will not work in IE. http://jsfiddle.net/v9sv7jdL/2/

Answer 1

In this case we actually had special logic in our app for IE. It adds a ?ts= to the end of our requests, which of course, does not exist in the templateCache.

Angular $templateCache Does Not Work in Internet Explorer

Question

1 answers

solution1
0 2015-01-30 18:46:40

Angular $templateCache Does Not Work in Internet Explorer

Question

1 answers

solution1 0 2015-01-30 18:46:40

solution1
0 2015-01-30 18:46:40