typescript + angular: factory with dependencies error

Question

I'm migrating my angular app to typescript. I've got following ts code:

/// <reference path="../../../typings/tsd.d.ts" />

class UiRoutingHelper {
  constructor(public $state: any) {};

  reloadCurrentView() {
    return this.$state.go(this.$state.current.name, this.$state.params, {
      reload: true
    });
  };
}

mp.core.CoreModule.factory('UiRoutingHelper', ['$state', UiRoutingHelper]);

which does compiles correctly. The whole application build process builds correctly as well. But in the runtime I get following error:

Error: [$injector:undef] Provider 'UiRoutingHelper' must return a value from $get factory method.
http://errors.angularjs.org/1.3.15/$injector/undef?p0=UiRoutingHelper
    at angular.js:63
    at Object.enforcedReturnValue [as $get] (angular.js:4058)
    at Object.invoke (angular.js:4203)
    at angular.js:4021
    at getService (angular.js:4162)
    at Object.invoke (angular.js:4194)
    at extend.instance (angular.js:8493)
    at angular.js:7739
    at forEach (angular.js:331)
    at nodeLinkFn (angular.js:7738)

Please advice me on what am I doing wrong.

typings//tsd.d.ts is just a bootstrap file, which loads some predefined interfaces. mp.core.CoreModule has been declared before (it's available for TypeScript).

basarat · Accepted Answer · 2015-07-17 09:54:36Z

2

don't use a factory with a class. Just use a service. Code:

class UiRoutingHelper {
  constructor(public $state: any) {};

  reloadCurrentView() {
    return this.$state.go(this.$state.current.name, this.$state.params, {
      reload: true
    });
  };
}

mp.core.CoreModule.service('UiRoutingHelper', ['$state', UiRoutingHelper]);

Here is a video on the topic : https://www.youtube.com/watch?v=Yis8m3BdnEM

answered Jul 17, 2015 at 9:54

basarat

278k60 gold badges475 silver badges528 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ajay Kumar · Accepted Answer · 2015-07-17 08:37:07Z

0

When using Typescript with Angular, factory registration expects a function that return a new instance of factory.

You can accomplish this by:

class UiRoutingHelper {
  static $inject = ['$state'];
  constructor(public $state: any) {};

  reloadCurrentView() {
    return this.$state.go(this.$state.current.name, this.$state.params, {
      reload: true
    });
  };
}

function factory(){
    return new UiRoutingHelper();
}

mp.core.CoreModule.factory('UiRoutingHelper', factory);

answered Jul 17, 2015 at 8:37

Ajay Kumar

1,1642 gold badges10 silver badges26 bronze badges

3 Comments

ducin Over a year ago

technically you're right. But it seems I shouldn't use factories. Just as @basarat wrote

Ajay Kumar Over a year ago

Factory registration is awkward in Typescript. Services seems better in this situation. At the end, both are singleton and can perform same task

ThomasDC Over a year ago

This Typescript code doesn't even compile. What about the ctor arguments?

Collectives™ on Stack Overflow

typescript + angular: factory with dependencies error

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related