Getting the error "Failed to create the module application due to an unknown provider" with my user provider

Question

Trying to create a custom provider and use it during application setup. At the setup stage, the error "The module application could not be created due to an unknown provider" configRoutesProvider. "Supplier code:

    (function () {
    'use strict';

    angular.module('app-routing', [])
        .provider('configRoutesProvider', function () {

            this.$get = ['$http', getRoutesProvider];

            function getRoutesProvider($http) {
                return {
                    getRoutes: function ($http) {
                        return $http.get('https://localhost:44311/api/account/routes').then(function (results) {
                            return results;
                        });
                    }
                };
            }
        });
}).call(this);

In the app.js code, get a link to the "app-routing" module:

(function () {
    'use strict';
    var app = angular.module('app',
            [
                'ngRoute',              // routing
                'LocalStorageModule',   // local storage

                'app-routing'
            ]);


        app.run();
})();

And in config.js, when you try to contact the provider, you get the above error:

app.config(['$routeProvider', 'configRoutesProvider', routeConfigurator]);
    function routeConfigurator($routeProvider, configRoutesProvider) {
        var routes = configRoutesProvider.getRoutes();
        routes.forEach(function (r) {
            $routeProvider.when(r.href, {
                controller: r.controller,
                templateUrl: r.templateUrl
            });
        });
        $routeProvider.otherwise({ redirectTo: '/home' });

    }

In index.html, the script registration order is as follows:

<script src="app/routesProvider.js"></script>
<!-- Load app main script -->
<script src="app/app.js"></script>
<script src="app/config.js"></script>

Can't figure out what I missed?

Answer 1

angular provider , , :

angular.module('foo').provider('configRoutes', function() { });

:

angular.module('foo').provider('configRoutesProvider', function() { });

, :

angular.module('foo').config(function(configRoutesProvider) { });

, provider .

Answer 2

: route.js

var appRoutes = angular.module('appRoutes',['ngRoute'])
appRoutes.config(function($routeProvider,$locationProvider){  
$routeProvider
.when('/',{
   templateUrl: 'app/views/pages/home.html'
})
.when('/about',{
   templateUrl: 'app/views/pages/about.html'
})
.otherwise({ redirectTo: '/'});
console.log('Testing routes routes...');
$locationProvider.html5Mode({
    enabled: true,
    requireBase: false,
});
});

-Works. route.js. $routeProvider, $locationPRovider, ngroute