import/inject modules in TypeScript+AngularJS the right way

Question

I've downloaded this module https://github.com/skeymeulen/swangular via npm and want to use it with TypeScript. Now I am struggling including the dependencies the correct way. Like the READ.me on GitHub tells me I am injecting the module in my app like this:

var app = angular.module("app", ['ui.bootstrap', 'swangular']);

My Controller looks like this then:

class SimpleController {
    static readonly $inject = ["$scope", "$http", "$uibModal", "swangular", ProjectsService.serviceName, AttributesService.serviceName];

        constructor(
            private $scope: ng.IScope,
            private $http: ng.IHttpService,
            private $uibModal: ng.ui.bootstrap.IModalService,
            private projectsSvc: IProjectsService,
            private attributesSvc: IAttributesService,
            private swangular: any) { }

...
}

Since I got no @types for swangular, I just use any as type.

Next, I try to call it like this:

this.swangular.swal('Swangular Demo', 'Great demo, right?', 'question');

I receive the following error:

TypeError: this.swangular.swal is not a function

I've included the following necessary js files:

<script type="text/javascript" src="../node_modules/sweetalert2/dist/sweetalert2.js"></script>
<script type="text/javascript" src="../node_modules/swangular/swangular.js"></script>

I also don't get the difference between that and importing a dependency in the beginning of the js file like import * as angular from 'angular'; . Maybe I'm using the wrong way?

I appreciate any help.

Answer 1

$inject annotation and constructor parameters don't match.

static readonly $inject = ["$scope", "$http", "$uibModal", "swangular", ProjectsService.serviceName, AttributesService.serviceName];

    constructor(
        private $scope: ng.IScope,
        private $http: ng.IHttpService,
        private $uibModal: ng.ui.bootstrap.IModalService,
        private projectsSvc: IProjectsService,
        private attributesSvc: IAttributesService,
        private swangular: any) { }

They should come in the same order, and they don't. There's no way how Angular can figure out that 4th $inject element ( "swangular" ) matches 6th constructor param ( private swangular: any ).