Unknown provider: membershipServiceProvider <- membershipService <- membershipController error in angularjs Dependency Injection

Question

I am able to run the code from one javascript file. but when I want to separate services into a separate file(in customServices folder) it is giving an injector error:- unknown provider. Debugger when placed in my membershipService.js - it is hit but still throws an error.

Similarly, I am unable to separate routing to another file. It is giving the same error.

folder structure:-

public contollers 1. app.js

customservices 1. membershipService.js

views 1. membershipdetails.html 2. index.html

Index.html code:-

 <head>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="stylesheets/style.css" rel="stylesheet">
<script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"> 
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular- 
route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular- 
resource.js"></script>
<script src="CustomServices/membershipService.js"></script>
<script src="ngRoute/viewroute.js" type="text/javascript"></script>
<script src="controllers/app.js"></script>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

</head>
<div>
<div class="container pt-5">
    <div ng-view></div>
</div>
</div>

controller code - app.js

   var app = angular.module("tdmModule", ["ngRoute"]);
   app.config(['$qProvider', function ($qProvider) {
   $qProvider.errorOnUnhandledRejections(false);
   }]);


 app.config(['$routeProvider','$locationProvider',
 function($routeProvider,$locationProvider) {
  $routeProvider
  .when("/", {
    templateUrl : "home",
    controller: 'homeController'
})
.when("/home", {
    templateUrl : "home",
    controller: 'homeController'
})
.when("/membershipdetails", {
    templateUrl : "membershipdetails",
    controller: 'membershipController'
})
.otherwise({redirectTo: '/'});
}]);

   app.service("membershipService", function () {

   this.jsondata = function(getdata){
    var d = {};
    console.log("Service calling " +getdata);
    if(getdata != undefined && getdata.TopN != undefined){
            d.TopN = getdata.TopN;
    }
    if(getdata != undefined && getdata.MemberNo != undefined){
        d.MemberNo = getdata.MemberNo;
    }
   return d;
      };
    });


 app.controller('membershipController', function($scope,$filter, $http, 
 $httpParamSerializer, $location, membershipService, setnotanoption, 
 compileservice) {
 var absurl = $location.absUrl().split('/#!/')[1];
 $scope.pagename = absurl;

  app.controller('membershipController', function($scope,$filter, $http, 
  $httpParamSerializer, $location, membershipService, setnotanoption, 
  compileservice) {
var absurl = $location.absUrl().split('/#!/')[1];
$scope.pagename = absurl;
$scope.noOfColumn = false;





$http.get('http://localhost:3000/membership').then(function (res) {
    var options = res.data;
    $scope.options = options;



    $scope.removeField = function(rmdata) {
        setnotanoption.setNotAnOption(rmdata, false, options);
        var myEl = angular.element( document.querySelector ("."+rmdata ) );
        myEl.attr('ng-show',false);

        compileservice.compile(myEl);

        var btnEl = angular.element( document.querySelector("#btnEl" ) );
        compileservice.compile(btnEl);
        setnotanoption.setNotAnOption(rmdata, false, options);
    };
    $scope.deleteField = function (index){
        $scope.rmdata.splice(index,1);
        alert("JSON Name is deleted");
      }

    $scope.addField = function(data) {
        if(data != undefined && data.optionSelect != null){
            var myEl = angular.element( 
    document.querySelector("."+data.optionSelect ) );
            myEl.attr('ng-show',true);
            compileservice.compile(myEl);
            setnotanoption.setNotAnOption(data.optionSelect, true, options);
        }
    };






         });
       });

NOTE:- IT Works till here. but once I move service code to different file as shown in beginning folder structure, it gives unknown provider error.

MY SERVICE CODE - WHERE I get error:-

 var app = angular.module("tdmModule", ["ngRoute"]);


    app.service("membershipService", function 
   ($location,$rootScope,$http,$filter,$cookies,$timeout,$document,$window) 
   {
this.jsondata = function(getdata){
    var d = {};
    console.log("Service calling " +getdata);

    if(getdata != undefined && getdata.TopN != undefined){
            d.TopN = getdata.TopN;
    }
    if(getdata != undefined && getdata.MemberNo != undefined){
        d.MemberNo = getdata.MemberNo;
    }

         if(getdata != undefined &&getdata.MemberStartDateHigh !=undefined){
        d.MemberStartDateHigh = getdata.MemberStartDateHigh;
    }

    return d;
};
 });

I have gone through 1. https://docs.angularjs.org/error/$injector/unpr 2. https://viralpatel.net/blogs/angularjs-service-factory-tutorial/ 3. AngularJS Service not working 4. Unknown Provider error using AngularJS

I am missing some conceptual thing I guess. Some code intentionally removed for readability.

My concept of service injection is its a simple js file which can be injected in any controller in the application and used as per application. It needs to be registered with correct folder structure as well.

Had you also included the new file in your html document (via a — tsh, Sep 20 '18 at 11:32
is included in index.html. I have included it after angular min js — mank91, Sep 20 '18 at 11:38
Seems there is a syntax error on `getdata.MemberStartDateHigh! =undefined`. Maybe you mass up this when reducing the problem? — tsh, Sep 20 '18 at 11:43

Marcus Höglund · Answer 1 · 2018-09-25T06:33:54.580

0

I added your code in a plunker to see what was going on.

First, you have lot of missing } and ) in your example which makes your example uncompilable.

Then when I sorted that out it complained on the setnotanoption and compileservice which you have defined as a dependency in membershipController. Those instances are not provided in your example.

When removing those, everything worked fine.

Note: Instead of binding all components on the object app I refered to the angular module as angular.module("tdmModule")

Here's the plunker.

edited Sep 25 '18 at 06:33

answered Sep 20 '18 at 11:44

Marcus Höglund

16,172
11
47
69

I tried angular.module("tdmModule").service("membershipService" --- . It did not work as expected. Error: $injector:nomod Module Unavailable Module 'tdmModule' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. – mank91 Sep 20 '18 at 12:02
Error: [$injector:unpr] also occurred. Thanks for your response and concept anyways :) – mank91 Sep 20 '18 at 12:03
@mank91 ok, instead of defining the var app = angular.module("tdmModule"... in your main file. use angular.module("tdmModule").config etc on the angular.module() all the way – Marcus Höglund Sep 20 '18 at 12:06
Thanks sir for follow up. I tried the same in main file that is app.js. removed app variable and placed angular.module("tdmModule"). Still getting the same error. – mank91 Sep 20 '18 at 12:11
@mank91 Could u change the order of the way you load the scripts where you define the angular.module("tdmModule", ["ngRoute"]) should be loaded before the dependent scripts – Marcus Höglund Sep 20 '18 at 12:18
sorry to inform. it did not help. – mank91 Sep 25 '18 at 05:53

Unknown provider: membershipServiceProvider <- membershipService <- membershipController error in angularjs Dependency Injection

1 Answers1