angularJS: Provider of app A not available in config of app B; app B is the main app attached to DOM

Question

I have a Provider defined in an angular module say A, and I am trying to use it in the config of another angular module say B, as shown in the following code snippet:

var A = (function(ng){
'use strict';

var a = ng.module('A',[]);

a.provider('MyProvider', function(){
    this.$get = ['$q', function($q){
        return new myService($q);
    }]
});

function myService($q){
    var data = // Some data
    this.getAllData = function(){
        return $q(function(resolve,reject){
            resolve(data)
        });
    }
}

//ng.bootstrap(a);

return a;
})(angular);

and app B is as follows:

//IIFE pattern for modularization

var B = (function(angular) {
    'use strict';


// initialize the Angular app
var b = angular.module('B', ['ui.router', 'A']);

b.config(config);

function config($stateProvider, $urlRouterProvider, myProvider){
    myProvider.getAlldata().then(function(data){
        //do some processing on data related to routes...
    }, function(err){
        //handle Err
    }); 
}


return b;
})(angular);

Now I am getting the err as:

angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module ngApp due to:Error: [$injector:unpr] Unknown provider: RouteProvider

Can someone please help me crack this? Thank you.

Answer 1

Apparently the myProvider should be referenced as myProviderProvider in the config function. its about naming the provider. And then you can use myProvider as a dependency to any other service/factory, and here the instance returned in the $get method of the myProvider(any provider for that matter) will be made available for use in the dependant service/factory.

If not so clear, Someone who understood can develop the answer. I 'll mark the best one as the answer. Thank you.