Doesn't work with @uirouter/angularjs types [TypeScript@2.4.2] [ng-metadata@4.0.1]

Hi, I hope I’m wrong assuming this project is abandoned? I’m going to report a problem I’m facing anyway.

@uirouter/angularjs is written in typescript and therefore it has its own type declarations included in its npm package. So far so good.

The problem I’m facing is with @Inject('$state') into the constructor of a Component in this case.

I can without a problem do

constructor(@Inject('$state) private $state)

But when I try to declare it with a type…

import { StateService } from '@uirouter/angularjs';
[...]
constructor(@Inject('$state') private $state: IStateService)

… it fails with this console output

Error: [$compile:ctreq] Controller 'undefined$state', required by directive 'auth', can't be found!
http://errors.angularjs.org/1.6.6/$compile/ctreq?p0=undefined%24state&p1=auth
    at angular.js:116
    at getControllers (angular.js:10015)
    at getControllers (angular.js:10022)
    at nodeLinkFn (angular.js:9915)
    at angular.js:10273
    at processQueue (angular.js:17051)
    at angular.js:17095
    at Scope.$digest (angular.js:18233)
    at Scope.$apply (angular.js:18531)
    at done (angular.js:12547)

I’m not sure where the problem starts, but I would guess it starts somewhere in the logic of the Inject-decorator while building the $inject array, i noticed that the string will be name $state#1 and not $state as one would expect… But that seems unlikely since types should be removed, maybe webpack is doing stuff that Inject-decorator is not prepared for?

Anyway, I used ng-annotate-loader (and ng-decorated) before using ng-metadata, and that worked as expected.

I would love to get some pointers from someone who knows what they are doing. And if you want code that replicates the behavior, I can provide that upon request.

Thank you!

[mtraynham]

@dlq84 I ran into an issue with TypeScript and UI Router $state injection a while back. I believe it stems from the fact that UI Router 1.0.6, switched its main script file to one that doesn’t re-export @uirouter/core.

https://github.com/angular-ui/ui-router/issues/3514

Therefore ng-metadata & TypeScript try to annotate the $state injected variable, but can’t because what you’ve imported is actually undefined.

Instead try:

import { StateService } from '@uirouter/core';

The type definitions don’t match the code. In any case, when trying to import StateService (or Transition), use @uirouter/core. When configuring your modules dependencies, you should still use @uirouter/angularjs to import the uirouter module.

and turn emitDecoratorMetadata back to true, it is necessary.

[dlq84]

@mtraynham Thank you! I just tried your solution and it does in fact work when i switch to to @uirouter/core!

@aciccarello I see, I missed that part, with @mtraynham’s solution it works now!

Thank you both for your time, I will close this issue now since it seems to work!