how do you inject a non-typescript angular service into a typescript class?

Question

I have an angular module and service that was developed without typescript such as:

MyModule = angular.module('MyModule', ['dependency1', 'dependency2']);
MyModule.factory('MyService', ['$otherDependency', function ($otherDependency) { 
    return { 
        myOperation: function(){...}
    };
}]);

I want to use this service in a typescript class without converting everything else to typescript. I tried the following but the injected service is always null:

/// <reference path="angular.d.ts"/>
module MyTypescriptModule { 
    export class MyClass extends MyOtherClass {
        static $inject = ['MyService'];
        constructor(private MyService) { ... }
    }
}

Is this possible, and if so what am I missing?

UPDATE: I was able to use PSL's suggestion from his js bin, slightly modified to avoid a dependency error with help from this question: Call Angular JS from legacy code

var angularInjector = angular.element($("#divWithNgApp")).injector();
MyService = angularInjector.get('MyService');

You mean the typescript class? it is a mere object. it previously had no knowledge of angular. — Scott Anderson, Jul 24 '14 at 18:42
Then how will angular know about that object and inject what you need, unless you register it as an angular entity. You can also try getting the instance of the service using `angular.injector` and use that inside your object. — PSL, Jul 24 '14 at 18:44
That looks promising but I get an error in angular trying to instantiate a dependency ($injector:unpr). Is there a way to fix that? Also, will it be an issue if the code is minified? — Scott Anderson, Jul 24 '14 at 21:38
Can you prepare a working jsbin? minification should not cause any issues... — PSL, Jul 25 '14 at 13:28

score 0 · Answer 1 · answered Jul 24 '14 at 20:02

0

 export class MyTypescriptModule implements MyTypescriptModule {

        public scope: any;
        public myService: any;

        constructor($scope:any, MyService:any) {

            this.scope = $scope;
            this.myService= MyService;

        }

Then in your function you can call the your service by using this.myService

answered Jul 24 '14 at 20:02

Narek Mamikonyan

4,601
2
24
30

MyTypescriptModule names are invented :) – Narek Mamikonyan Jul 24 '14 at 20:03
Are you saying create an interface also called MyTypescriptModule? If I try it like it is I get an error about a recursive reference. – Scott Anderson Jul 24 '14 at 21:41
that why I mentioned what the names are invented , and you must change to your names !!!! You can also not implement or extend something at whole – Narek Mamikonyan Jul 25 '14 at 06:14

score 0 · Answer 2 · answered Jul 24 '14 at 20:04

0

Angular services can only be injected in angular "objects"...

if your class is being used by a controller, you can pass an instance:

module SomeModule {
  class MyClass extends MyOtherClass {
    constructor(myService:MyService) {
    }
  } 
  class MyController {
    constructor(myService:MyService) {
      MyClass c = new MyClass(myService);
    }
  }
}

angular.module('app).controller('MyController', ['MyService', MyController]);

a plunker would help answer better...

answered Jul 24 '14 at 20:04

malix

3,566
1
31
41

It's not being used by a controller. It was suggested to use angular.injector(['MyModule']) but I get an ($injector:unpr) error since MyModule has dependencies itself. Any idea how to fix that? – Scott Anderson Jul 24 '14 at 21:45

how do you inject a non-typescript angular service into a typescript class?

2 Answers2