AngularJS why can't I use share a provider with another module?

Question

I have a App module that has many component modules that are injected into the App module. The App module has a provider that I would like to use inside of the component modules, but I am receiving an injector error: Error: $injector:modulerr Module Error

Here is what I am trying

var App = angular.module('App', [
    'ngRoute',
    'Blog',
    'Media',
    'Pages',
]);
App.provider('Core', function() {

    this.baseDirectory = '/test';

    this.$get = function() {
        var baseDirectory = this.baseDirectory;
    }
});

App.config(['$routeProvider', 'CoreProvider', function($routeProvider, CoreProvider) {

    $routeProvider
        .when(CoreProvider.baseDirectory + '/admin', {
            templateUrl: baseUrl + '/backend/scripts/angular/index.html'
        })
        .otherwise({
            template: ""
        });
}]);

All of the above code works, its when I try to use the CoreProvider inside of another module, such as Blog (has been injected into App module)

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


Blog.config(['$routeProvider', 'CoreProvider', function($routeProvider, CoreProvider) {

    $routeProvider
        .when(CoreProvider.baseDirectory + '/admin/blog', {
            templateUrl: CoreProvider.baseDirectory + '/blog/blog.html',
            controller: 'BlogController'
        });
}]);

I receive the error Error: $injector:modulerr Module Error and the Angular docs state that this error occurs when a module fails to load due to an exception.

Why can't I use CoreProvider inside of my Blog module?

Answer 1

If sharing a base directory is all you need, why not use a Constant?

var shared = angular.module('Shared',[]);

shared.constant('baseDirectory', '/test');

// Use the constant on your modules:

var module1 = angular.module('Module1', ['Shared']);

module1 .config(['baseDirectory', function(baseDirectory) {
    console.log(baseDirectory + '/admin2');
}]);

var module2 = angular.module('Module2', ['Shared']);

module2.config(['baseDirectory', function(baseDirectory) {
    console.log(baseDirectory + '/admina');
}]);

Here is a working plunkr: http://plnkr.co/edit/wktdqCMZuvDbk7sz1mMi?p=preview

I guess that this is a better practice, for more info please refer to: https://docs.angularjs.org/guide/providers