How to fix $injector:unpr Unknown Provider Error in AngularJS?

Question

I'm getting the following error:

Error: $injector:unpr Unknown Provider
Unknown provider: _planetsProvider <- _planets <- SearchController

.API get request is working fine and my SearchController.js is also triggered, but I'm still getting the error above. I have tried almost all suggestions from StackOverflow and official document. How can I fix it?

Here's my code: (Plunker link)

app.js

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

myApp.config( function($routeProvider) {
    $routeProvider
    .when('/', { templateUrl: '/views/home.html',
                                controller: 'HomeController' })
      .when('/login', { templateUrl: '/views/login.html',
                                controller: 'LoginController' })
                               
      .when('/search',  { templateUrl: '/views/search.html',
                                controller: 'SearchController',
                                resolve:{
                                    _planets: function(myService)
                                    {
                                        console.log("asdas");
                                        return myService.getRequestForPlanets();

                                    }
                                }
                            })
                                
      });

SearchController.js

angular.module('myApp').controller('SearchController', function($scope, myService, _planets, $rootScope) {
    $scope.message = 'This is Show orders screen';
    $scope.planets=_planets;
    console.log(_planets);
});

myService.js

angular.module('myApp').service('myService', function($http, $rootScope, $location, $q)
{   
    $rootScope.loading = false; 

    this.getRequestForPlanets=function()
    {
        $rootScope.loading = true;
        var deferred = $q.defer();
        $http.get('https://swapi.co/api/planets')
        .then(function(response){
            $rootScope.loading = false;
            console.log(response.data.results);
           deferred.resolve(response.data.results);
        })
        .catch(function(response){
          deferred.reject(response);
        });
        
        return deferred.promise;
        
    }

});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="myCss.css">
 


</head>
<body  ng-app="myApp">
 <!-- ng-controller="myController" -->
 <div class="spinner" ng-show="loading">
  <div class="loader" ></div>
</div>


<div ng-view></div>

<section class="imgDiv">
    <div  class="container-fluid">
        <!-- <img src="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg" style="width: 100%;"> -->
        <div class="sn_scroll_btn slideInDown ">
           <img src="images/scroll.png" alt="" class="test">
       </div>
    </div>
</section>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>   
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
  <script type="text/javascript" src="app.js"></script>
    <script type="text/javascript" src="controllers/LoginController.js"></script>
  <script type="text/javascript" src="controllers/SearchController.js"></script>
  <script type="text/javascript" src="services/myService.js"></script>
  <script type="text/javascript" src="controllers/HomeController.js"></script>

</body>
</html>

edit: If you can create a fiddle illustrating this, that would help get this questions answered — Sharmila Jesupaul
Are you sure about these lines? $scope.planets=_planets; console.log(_planets); — Rakesh Burbure
where is this _planets injected service coming from? have you missed to include any script tag in html file? — Rakesh Burbure
@Rakesh Burbure - I have followed below link to use resolve property in app.js odetocode.com/blogs/scott/archive/2014/05/20/… — D_B

Sharmila Jesupaul Sharmila Jesupaul · Accepted Answer · 2018-03-12T17:57:19

Based on the plnkr link you provided: https://plnkr.co/edit/WRh3z5HTGby6nT1G8ovi?p=preview

Your controller is being instantiated twice, once in your routes, in app.js here:

.when('/search',  { templateUrl: '/views/search.html',
                        controller: 'SearchController',
                        ...

and again in your view in search.html here:

<div ng-controller="SearchController">
<p>{{message}}</p>
...

Since the SearchController has already been injected into the app by your routes, the second time it's instantiated in the view, it throws the Unknown Provider error.

If you remove ng-controller="SearchController" from search.html it should fix the issue that you're having.

Hope that helps!

How to fix $injector:unpr Unknown Provider Error in AngularJS?

Here's my code: (Plunker link)

1 Answers