0

I am trying to inject a service into a controller using the resolve property of $routeProvider but I am getting this error when I run it. Any suggestion would be great. Thanks in advance.

Error: [$injector:unpr] Unknown provider: messageProvider <- message

GitUserService.js

module.exports = function (app) {
    app.factory('GitUser', ['$http', function ($http) {
        return {
            GetGitUser: function (username) {
                return $http.get('https://api.github.com/users/' + username)
                .then(function success(response) {
                    return response.data.login;
                }, function error(response) {
                    return console.log("error");
                });
            }
        };
    }]);
};

route.js

module.exports = function (app) {
    require('../../services/GitUserService')(app);

    app.config(['$routeProvider', function ($routeProvider) {
        $routeProvider.when('/angularhome', {
            template: '<home></home>',
            resolve: {
                message: ['GitUser', function (GitUser) {
                    return GitUser.GetGitUser('test');
                }]
            }
        })
    }]);
};

HomeController.js

require('./Home.scss');

module.exports = function (app) {
    app.component('home', {
        templateUrl: 'Content/app/components/home/Home.html',
        controller: ['message', HomeController]
    });

    function HomeController(message) {
        this.name = message;
    }
};

index.js

module.exports = function (app) {
    require('./route')(app);
    require('./HomeController')(app);
};
georgeawg
  • 48,608
  • 13
  • 72
  • 95
Ron
  • 59
  • 9
  • https://docs.angularjs.org/guide/component#components-as-route-templates – JB Nizet Apr 05 '17 at 22:01
  • See [AngularJS Developer Guide - Components as route templates](https://docs.angularjs.org/guide/component#components-as-route-templates). Also be aware that the `GitGitUser` function is **converting** the rejected promise to a successful promise. See [Angular execution order with `$q`](http://stackoverflow.com/questions/34324153/angular-execution-order-with-q/34326388#34326388) – georgeawg Apr 05 '17 at 22:24
  • thanks guys, reading those links that you provided solve the issue! – Ron Apr 05 '17 at 22:54

1 Answers1

-1

Updated my code based on the responses and this is the fix.

HomeController.js

require('./Home.scss');

module.exports = function (app) {
    app.component('home', {
        templateUrl: 'Content/app/components/home/Home.html',
        controller: HomeController,
        bindings: {
            name: '<'
        }
    });

    function HomeController() {
        this.name = name;
    }
};

route.js

module.exports = function (app) {
    require('../../services/GitUserService')(app);

    app.config(['$routeProvider', function ($routeProvider) {
        $routeProvider.when('/angularhome', {
            template: '<home name="$resolve.message"></home>',
            resolve: {
                message: ['GitUser', function (GitUser) {
                    return GitUser.GetGitUser('test');
                }]
            }
        })
    }]);
};
Ron
  • 59
  • 9