Angular 1 dependancy injection with JavaScript and TypeScript

Question

I'm trying to figure out how to use TypeScript in an existing Angular 1.5 app. I can't figure out how to inject custom services. Angular services and 3rd party services work fine. The services I need to inject are still vanilla JS services. In the example below I need to inject reportService.

The error I get is getReportById is not a function.

class ReportController implements IReportController {

    static $inject = ['$stateParams', 'reportService'];


    constructor(private $stateParams: angular.ui.IStateParamsService, private reportService) {

        this.getReport($stateParams.id);
    }

    getReport(id: number): object {
        reportService.getReportById(id)
            .then(function(res) {
                console.log(res)
            });
    }

}

Here is the service.

angular.module('reportsServiceModule', [])
    .factory('reportsService', [
        '$http',
        reportsService
    ]);

function reportsService(
        $http
) {

    'use strict';

    var service = {};

    service.getReportById = function(reportID) {
        return 'A promise';
    };

    return service;
}

reportService is a regular angular 1 service (could be any service) written in JavaScript (no TypeScript). — Ian Hoar
– Ian Hoar, Commented Mar 14, 2017 at 1:28
Please, provide the code for it. It matters. For any service you can use any type, but you won't benefit from TS this way. Do you have particular problems with the code above? — Estus Flask
– Estus Flask, Commented Mar 14, 2017 at 1:42
Adding any doesn't fix the issue, I've added the service structure. — Ian Hoar
– Ian Hoar, Commented Mar 14, 2017 at 18:06

Estus Flask · Accepted Answer · 2017-03-15 00:01:12Z

1

The only real difference between JS and TS development in AngularJS is that the units can be typed. This doesn't affect anything but type safety.

Here it would be

interface IReportService {
 getReportById: (someType) => string;
}

...
constructor(
  private $stateParams: angular.ui.IStateParamsService,
  private reportService: IReportService
) {
...

There's no problem with dependency injection. If you have DI problem in Angular, you get an error from injector.

The real problem here is that strict mode isn't used. With use strict statement or alwaysStrict TS option the error would show what's really wrong - reportService variable is not defined in getReport method.

Instead, it should be

getReport(id: number): object {
    this.reportService.getReportById(id)
    ...

answered Mar 15, 2017 at 0:01

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

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

1 Comment

Ian Hoar Over a year ago

Thanks, I figured this out later in the day and this was the issue. I also had an order issue with my constructor, I had added another variable not shown above and didn't realize it could also break the injection.

Phuc Tran · Accepted Answer · 2017-03-14 21:04:02Z

0

It's a typo.

You defined a reportsService

.factory('reportsService')

But injected a different one

static $inject = ['$stateParams', 'reportService'];

answered Mar 14, 2017 at 21:04

Phuc Tran

1412 bronze badges

1 Comment

Estus Flask Over a year ago

It's true that there is a typo. However, it was made in the question, not in the original code. Otherwise there would be DI error, not ' getReportById is not a function'.

Collectives™ on Stack Overflow

Angular 1 dependancy injection with JavaScript and TypeScript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related