jlembke jlembke - 5 months ago 19
AngularJS Question

Angular Service Throwing "Unknown Provider"

I'm spinning my wheels on this. I'm trying to provide an instance of this service to my controller. When I run it, I get


JavaScript runtime error: [$injector:unpr] Unknown provider:
app.services.GithubServiceProvider <- app.services.GithubService <-
app.githubViewer.UserController


Here are the pieces:


  1. Service itself

    module app.services {
    'use strict';

    export interface IGithubService {
    getUser(username: string): ng.IPromise<any>;
    }

    export class GithubService implements IGithubService {

    githubUrl: string = 'https://api.github.com/';

    static $inject = ['$http'];
    constructor(private $http: ng.IHttpService) {

    }
    getUser(username: string): angular.IPromise<any> {
    return this.$http.get(this.githubUrl + "users/" + username)
    .then(response => response.data);
    }
    }

    angular
    .module('app.services')
    .service('app.services.GithubService', GithubService);


    }

  2. The Controller

    module app.githubViewer {
    'use strict';

    interface IUserControllerScope { //scope definitions

    }

    class UserController implements IUserControllerScope {

    static $inject = ['app.services.GithubService', '$route'];
    constructor(githubService: app.services.IGithubService, $route: ng.route.IRouteService) {
    //...
    }

    }

    angular
    .module('app.githubViewer')
    .controller('app.githubViewer.UserController', UserController);


    }



Update, I looked at this list of common issues here, and it looks like it's all in order. Code is below:

Here is my main module declaration:

((): void => {
'use strict';

angular
.module('app', [
'app.core',
'app.services',
/*
*Feature Modules
*/
'app.githubViewer'
]);
})();


And here is the service module declaration:

((): void => {
'use strict';

angular
.module('app.services', []);
})();


I have triple checked to make sure the scripts are added to the page.

Please let me know if there is anything else I should post here. I'm a beginner on Angular and TypeScript.

Answer

You have to declare app.services as a dependency for app.githubViewer

angular
    .module('app.githubViewer', ['app.services'])
Comments