TypeScript Angular - Unknown provider by static $inject ['customServiceName']

Question

In this the repo

In the controller, I'm trying to inject the UserService :

 class UserDetailController implements IUserDetailScope {

        static $inject = ['app.core.services.UserService'];              // static injection

        constructor(userService: app.core.services.IUserService) {

But it fails on the browser' console with:

Unknown provider: app.core.services.UserServiceProvider <- app.core.services.UserService <- UserDetailController

Could you say why?

Answer 1

Try upper casing the "U" in UserService in the constructor. When angular goes to inject, it just does a match on the name of the service, and it matches case.

EDIT

Just realized you're using $inject, I'm leaving the first response up in case some others find it.

You didn't show us the code that registers the service, but that's the next culprit, usually. I'd guess you're registering it as 'UserService', not 'app.core.services.UserService', or else you're doing an App.controller() instead of App.service() registration. Those are the other two major culprits that come to mind.

Answer 2

you are writing the whole namespace to inject a service but there is neat way in which i do

    module portal {
      var app =angular.module('fooModule',[]);
          app.service(services);
          app.controller(controllers);

    }

    module portal.services {

       //all your services will go under this namespace
      export class fooService{
              //service body here
           }
    }


     module portal.controller{

      export class UserDetailController implements IUserDetailScope {

          static $inject = ['UserService'];                                 

         constructor(userService: potal.services.IUserService) {

      }
     }