When Custom Route Provider is not a valid function

Question

When Custom Route Provider is not a valid function

This question has been revised since this morning.

I am working with two distinct modules, 'admin' and 'authorization'. Within the provider block of the authorization module, I utilize $routeProvider to add an identical route to all route definitions.

Let's start with admin.js:

angular.module('authorization', [])
    .provider('$appRoute', function () {
        this.$get = function($routeProvider) {
            var universalResolves = {authorize: function($authorization) {
                    return $authorization.authorize();
                }};

            var extendedRouter = angular.extend({}, $routeProvider, {
                when: function(path, route) {
                    route.resolve = (route.resolve) ? route.resolve : {};
                    angular.extend(route.resolve, universalResolves);
                    $routeProvider.when(path, route);
                    return this;
                }
            });

            return new extendedRouter();
        }
    })
    .factory('$authorization', ['$http', '$location', function($http, $location) {

        var $authorization = {};

        $authorization.authorize = function() {

            var path = $location.path();

            return promise = $http.get('/svc/authorize/view?urlPath=' + path).then(function(response) {
                var data = response.data;
                if (response.data.result === 'NOT_AUTHORIZED') {
                    throw "NOT_AUTHORIZED";
                }

                return data;
            });

        };

        return $authorization;
    }]);

Now let's move on to my admin module:

angular.module('admin', ['ngRoute', 'ngSanitize', 'ngCsv'
        , 'authorization'
    ])

    .controller('mainCtrl', function() {

    })
    .config(['$routeProvider', '$appRouteProvider', function($routeProvider, $appRouteProvider) {

        // The previous definition that needs to be updated to use $appRouteProvider
        $routeProvider.when('/login', {
            templateUrl: '/login/auth.html',
            controller: 'loginCtrl'
        });

        $appRouteProvider.when('/page', {
            templateUrl: 'page.tmpl.html',
            controller: 'pageCtrl'
        });

Unfortunately, an error occurs:

Error: [$injector:modulerr] Failed to instantiate module app due to:
$appRouteProvider.when is not a function
@https://localhost:8443/admin.js:87:9
invoke@https://localhost:8443/js/angular/angular.js:4718:16
runInvokeQueue@https://localhost:8443/js/angular/angular.js:4611:11
loadModules/<@https://localhost:8443/js/angular/angular.js:4620:11
forEach@https://localhost:8443/js/angular/angular.js:321:11
loadModules@https://localhost:8443/js/angular/angular.js:4601:5
loadModules/<@https://localhost:8443/js/angular/angular.js:4618:40
forEach@https://localhost:8443/js/angular/angular.js:321:11
loadModules@https://localhost:8443/js/angular/angular.js:4601:5
createInjector@https://localhost:8443/js/angular/angular.js:4523:19
doBootstrap@https://localhost:8443/js/angular/angular.js:1758:20
bootstrap@https://localhost:8443/js/angular/angular.js:1779:12
angularInit@https://localhost:8443/js/angular/angular.js:1664:5
@https://localhost:8443/js/angular/angular.js:31763:5
j@https://localhost:8443/js/jquery/jquery.min.js:2:29566
g/</k<@https://localhost:8443/js/jquery/jquery.min.js:2:29882

The $appRouteProvider is being recognized, but only the this.$get() method. Can anyone provide assistance?

javascript angularjs

Answer 1

Answer №1

Discussing the issue at hand, it appears that the $appRoute provider does not have any methods exposed on itself other than $get. Therefore, it functions as an empty api config provider object.

When utilizing the base provider recipe, the $get method is utilized to offer a function for generating the service, and the this from the provider is utilized to attach additional config functions that can set data for the $get function to utilize later on.

Referencing the Angular provider documentation:

myApp.provider('unicornLauncher', function UnicornLauncherProvider() {
  var useTinfoilShielding = false;

  // Provider config API method.
  this.useTinfoilShielding = function(value) {
    useTinfoilShielding = !!value;
  };

  this.$get = ["apiToken", function unicornLauncherFactory(apiToken) {

    // Assuming the UnicornLauncher constructor was modified to also accept and utilize the useTinfoilShielding argument
    return new UnicornLauncher(apiToken, useTinfoilShielding);
  }];
});

If you wish to introduce additional methods on the provider, you can utilize this.when = ... or Angular.extends(this, ....), for example.

Answer 2

Discussing the issue at hand, it appears that the $appRoute provider does not have any methods exposed on itself other than $get. Therefore, it functions as an empty api config provider object.

When utilizing the base provider recipe, the $get method is utilized to offer a function for generating the service, and the this from the provider is utilized to attach additional config functions that can set data for the $get function to utilize later on.

Referencing the Angular provider documentation:

myApp.provider('unicornLauncher', function UnicornLauncherProvider() {
  var useTinfoilShielding = false;

  // Provider config API method.
  this.useTinfoilShielding = function(value) {
    useTinfoilShielding = !!value;
  };

  this.$get = ["apiToken", function unicornLauncherFactory(apiToken) {

    // Assuming the UnicornLauncher constructor was modified to also accept and utilize the useTinfoilShielding argument
    return new UnicornLauncher(apiToken, useTinfoilShielding);
  }];
});

If you wish to introduce additional methods on the provider, you can utilize this.when = ... or Angular.extends(this, ....), for example.

Answer 3

Answer №2

I decided to go for a more straightforward approach instead of extending the route provider.

Within my main module, I made adjustments to all routes using the following code:

angular.module('app'[])
    .run(function($route) {
        var keys = Object.keys($route.routes);
        keys.forEach(function(key) {
            var alteredRoute = $route.routes[key];

            // if there's already a resolve function defined, don't overwrite it, just add a new one
            alteredRoute.resolve = key.resolve?key.resolve:{};
            alteredRoute.resolve.authorize = function($authorization) {
                return $authorization.authorize();
            }

            $route[key] = alteredRoute;
        });
     });

This method functions because the routes had already been set in other modules' .config() sections, which were executed before the run() block. It may not be the prettiest solution, but it gets the job done.

Answer 4

I decided to go for a more straightforward approach instead of extending the route provider.

Within my main module, I made adjustments to all routes using the following code:

angular.module('app'[])
    .run(function($route) {
        var keys = Object.keys($route.routes);
        keys.forEach(function(key) {
            var alteredRoute = $route.routes[key];

            // if there's already a resolve function defined, don't overwrite it, just add a new one
            alteredRoute.resolve = key.resolve?key.resolve:{};
            alteredRoute.resolve.authorize = function($authorization) {
                return $authorization.authorize();
            }

            $route[key] = alteredRoute;
        });
     });

This method functions because the routes had already been set in other modules' .config() sections, which were executed before the run() block. It may not be the prettiest solution, but it gets the job done.

When Custom Route Provider is not a valid function

Answer №1

Answer №2

Similar questions

Having trouble getting a basic jQuery UI tooltip to function properly

Guide to streaming audio files using vue.js

What is the best way to refresh the script located within the head tag of an index.html file in an Angular

Unraveling the mysteries of this PHP-generated object

Unable to display the Error 404 Component within a nested Component using React Router

Is there a way in JavaScript to track changes in CSS properties such as transitioning from "display:none" to "display:block"?

How to send URL parameters to a different page with the help of express and Node.js

Checking authentication globally using Vue.js

Update the inputs following the filtering or searching of issues in VueJS

Vue: Utilizing computed properties to monitor changes in offsetHeight of elements

"Identify the protocol name (string) based on a specific port number in TCP/UDP communication

Failure to upload file using AngularJS

Delay calls to JavaScript functions, ensuring all are processed in order without any being discarded

Errors encountered by the Chrome extension

"Troubleshooting: Why Won't insertAfter Function Work with

iOS unique identifier with Phonegap and AngularJS

Tips for preventing the use of website URLs as variables in jQuery ajax() calls:

Guide for integrating images in React Native

Having difficulty with loading JSON data into jqGrid

Steps for assigning a texture to a child Mesh within an Object3D