Angularjs unknown provider in $templateRequestProvider

23,054

Solution 1

Done. In most of the cases it would be the versions of angular-route and angularjs were conflicting. After then, it mostly crashed the page due to continuous loop requests in

.when('/', {    
    templateUrl : 'pages/profile.html',
    controller  : 'profileController'
})

Every time it saw a '/', it redirected to the same page all over again and hence forming an infinite redirect loop. This should be used in the last so that the first ones are checked, and if something remains, then it sees the '/' route.

Solution 2

Had the same problem, the issue for me was also a dependancy but not angular-route. The dependancy that caused the error for me was angular-bootstrap.

The current angular version in our project is 1.28 and angular-route is also 1.28. This error was triggered on updating angular-bootstrap from 0.12.1 to 0.13.

Solution 3

The only issue with your code is the missing closing curly brace after surveyFactory definition.

Change the code for app and factory definition to below to fix the issue:

  var surveyApp = angular.module('surveyApp',['ngRoute']);

  surveyApp.factory('surveyFactory',function (){
      return {}
  });
Share:
23,054
Shikhar
Author by

Shikhar

JavaScript, Node.js, NoSQL databases, REST, APIs and Bootstrap. #SOreadytohelp

Updated on August 01, 2022

Comments

  • Shikhar
    Shikhar almost 2 years

    I am including other html files as template in index.html. For this i am using ng-view directive. But i am getting an error: Unknown provider: $templateRequestProvider <- $templateRequest <- $route <- ngViewDirective The code I am using is:

    'use strict';
     var surveyApp = angular.module('surveyApp',['ngRoute']);
        surveyApp.factory('surveyFactory',function (){
     return {}
    });
    

    Here are the Controllers :

    surveyApp.controller('profileController', function($scope,surveyFactory) {
        // create a message to display in our view
        $scope.message = 'This is the profile page';
    });
    
    surveyApp.controller('surveysController', function($scope,surveyFactory) {
        // create a message to display in our view
        $scope.message = 'This is the surveys page';
    });
    

    The Config:

    surveyApp.config(function($routeProvider, $locationProvider) {
    $routeProvider
        .when('/', {    
            templateUrl : 'pages/profile.html',
            controller  : 'profileController'
        })
    
        .when('/surveys', {
            templateUrl : 'pages/surveys.html',
            controller  : 'surveysController'
        });
    $locationProvider.html5Mode(true);
    });
    

    This is the HTML:

    <body ng-app="surveyApp">
        <div id="main">
            <div ng-view></div>
        </div>
    </body>
    

    Where am I missing?