title: compile:tpload Failed to load template in Angularjs app
body: <p>My app was working just fine but since i started to use $http service i get <code>[$compile:tpload] Failed to load template</code> error. I have no idea where to start the troubleshooting. I searched online and people are talking about adding a require in  <code>templateUrl</code> field but i did not understand can yu please help:
  Here is my code :</p>
  
  <pre><code>var myApp = angular.module('myApp', ['ngResource', 'ngRoute', 'ngCookies']);
  myApp.value('usersOnline', '');
  myApp.value('iden', 'lol');
  myApp.config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'partials/main.html',
        access: {restricted: true}
      })
      .when('/api/meetups', {
        templateUrl: 'partials/main.html',
        access: {restricted: true}
      })
      .when('/accesscontrol', {
        templateUrl: 'partials/accesscontrol.html',
        access: {restricted: true}
      })
      .when('/login', {
        templateUrl: 'partials/login.html',
        controller: 'loginController',
        access: {restricted: false}
      })
      .when('/prive', {
        templateUrl: 'partials/prive.html',
        controller: 'userController',
        access: {restricted: true}
      })
      .when('/publicforum', {
        templateUrl: 'partials/forumpublic.html',
        controller: 'userController',
        access: {restricted: true}
      })
      .when('/publicforumgw', {
        templateUrl: 'partials/toforumpublic.html',
        controller: 'userController',
        access: {restricted: true}
      })
      .when('/populatedforum', {
        templateUrl: 'partials/populatedforum.html',
        controller: 'userController',
        access: {restricted: true}
      })
      .when('/populatedforumgw', {
        templateUrl: 'partials/toforumpopulated.html',
        controller: 'userController',
        access: {restricted: true}
      })
      .when('/privateforum', {
        templateUrl: 'partials/forumprivate.html',
        controller: 'userController',
        access: {restricted: true}
      })
       .when('/privateforumread', {
        templateUrl: 'partials/forumprivateread.html',
        controller: 'userController',
        access: {restricted: true}
      })
        .when('/privateforumwrite', {
        templateUrl: 'partials/forumprivatewrite.html',
        controller: 'userController',
        access: {restricted: true}
      })
      .when('/privateforumgw', {
        templateUrl: 'partials/toforumprivate.html',
        controller: 'userController',
        access: {restricted: true}
      })
        .when('/messenger', {
        templateUrl: 'partials/messenger.html',
        controller: 'messenger',
        access: {restricted: true}
      })
         .when('/forum', {
        templateUrl: 'partials/forum.html',
        controller: 'messenger',
        access: {restricted: true}
      })
        .when('/messengernew', {
        templateUrl: 'partials/messengernew.html',
        controller: 'messengernew',
        access: {restricted: true}
      })
      .when('/messengergw', {
        templateUrl: 'partials/tomessenger.html',
        controller: 'userController',
        access: {restricted: true}
      })
      .when('/logout', {
        controller: 'logoutController',
        access: {restricted: true}
      })
      .when('/register', {
        templateUrl: 'partials/register.html',
        controller: 'registerController',
        access: {restricted: false}
      })
  
      .otherwise({
        redirectTo: '/'
      });
  });
  
  myApp.run(function ($rootScope, $location, $route, AuthService) {
    $rootScope.$on('$routeChangeStart',
      function (event, next, current) {
        AuthService.getUserStatus()
        .then(function(){
          if (next.access.restricted &amp;&amp; !AuthService.isLoggedIn()){
            $location.path('/login');
            $route.reload();
          }
        });
    });
     //$rootScope.test = '';
  });
  </code></pre>