CODEWITHSUNDEEP
angularjstypescriptdependency-injection
Chris Halcrow
Chris Halcrow

Reputation: 31990

Angular - property '$inject' does not exist on type error in VS2015

I'm getting thousands of compiler errors in Visual Studio 2015 when I'm upgrading an AngularJS project to Angular 4. I've converted the app to a hybrid app that can successfully run AngularJS code alongside Angular4 code. Using CLI compilation, the typescript compilation is successful and the app works.

Most of the errors are in the *.d.ts files, however there are also a few errors in the *.ts files. I'm wondering if the errors in the *.ts are preventing correct compilation and if that's causing the other errors in the *.d.ts files.

One of the error types occurs in a *.ts file when I have something like this (which uses AngularJS code):

myCtrl.$inject = ['$window'];

I get this error:

Property '$inject' does not exist on type 'typeof myCtrl'

Assuming that I need to fix this specific error (and that this isn't just some other compilation issue that's causing $inject not to be recognised), what do I need to do? Here's the full code for one of my *.ts files that has the error:

(function() {

class myCtrl {

    window: any;

    constructor($window, $location) {
        this.window = $window;
    }

    myMethod(myParameter) {
        ... do stuff
    }
}

// *****error on this line*******
myCtrl.$inject = ['$window'];

class myDirective {

    restrict: string;
    controller: string;
    controllerAs: string;
    templateUrl: string;
    $document: any;
    $window: any;
    instance: any;

    constructor($document, $window) {
        this.restrict       = 'E';
        this.controller     = 'myCtrl';
        this.controllerAs   = 'myCtrlAlias';
        this.templateUrl    = '/yadda.html';
        this.$document      = $document;
        this.$window        = $window;
    }
    static myFactory($document, $window) {
        var instance = new myDirective($document, $window);
        return instance;
    }
}

angular
    .module('myModule', ['myDependency'])
    .directive('mainNav', ['$document', '$window', myDirective.myFactory])
    .controller('myCtrl', myCtrl);
})();

This is my tsconfig.json. I'm using tsc 1.8

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true,
    "noStrictGenericChecks": true
  },
  "include": [ "**/*.ts" ],
  "exclude": [
    "node_modules"
  ]
}

Upvotes: 1

Views: 3176

Answers (1)

Estus Flask
Estus Flask

Reputation: 223054

Assigning class static and prototype properties directly causes type errors in TypeScript, because there are some limitations

TypeScript inherently supports class fields. It should be:

class myCtrl {
    static $inject = ['$window'];

    constructor($window, $location) { ... }
    ...
}

This also allows to have DI annotation right above constructor and avoid DI mistakes.

Upvotes: 1

Related Questions