Problems with service injection in a AngularJS controller written in TypeScript

Question

I want to inject the self-written service CalculatorService.ts in the self-written AngularJS controller with name StringCalculatorController.ts.

My CalculatorService looks like that :

/// <reference path="../typescript_definitions/angular.d.ts" />

module CalculatorModule {
    export class CalculatorService {

        // implementation stuff....

    }

}

var app = angular.module("AngularCalculatorModule", []);
app.service("calculatorService", CalculatorModule.CalculatorService);

The StringCalculatorController should use the CalculatorService as dependency:

/// <reference path="../typescript_definitions/angular.d.ts" />
/// <reference path="CalculatorService.ts" />

module CalculatorModule {


    export class StringCalculatorController {

        private calculatorService:CalculatorModule.CalculatorService;


    static $inject = ['calculatorService'];
        constructor(calculatorService) {
            console.log(calculatorService);
        }
    }
}

var app = angular.module("AngularCalculatorModule", []);
app.controller("StringCalculatorController",CalculatorModule.StringCalculatorController);

This does not work. It gives me following error-Message:

Error: [$injector:unpr] Unknown provider: calculatorServiceProvider <- calculatorService <- StringCalculatorController
http://errors.angularjs.org/1.4.8/$injector/unpr?p0=calculatorServiceProvider%20%3C-%20calculatorService%20%3C-%20StringCalculatorController
    at angular.js:68
    at angular.js:4334
    at Object.getService [as get] (angular.js:4482)
    at angular.js:4339
    at getService (angular.js:4482)
    at Object.invoke (angular.js:4514)
    at extend.instance (angular.js:9182)
    at nodeLinkFn (angular.js:8299)
    at compositeLinkFn (angular.js:7731)
    at compositeLinkFn (angular.js:7734)

Im starting the script by following index.html:

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <script src="bower_components/angular/angular.js"></script>
    <script src="src/CalculatorService.js"></script>
    <script src="src/StringCalculatorController.js"></script>
</head>
<body ng-app="AngularCalculatorModule">
    <div ng-controller="StringCalculatorController">
    </div>
</body>
</html>

Can somebody please help me?

Michael Rose · Accepted Answer · 2015-12-09 13:31:38Z

2

You are defining your angular module AngularCalculatorModule twice, i.e. you have the line

var app = angular.module("AngularCalculatorModule", []);

in both of your typescript files.

Put the creation of the angular module angular.module("AngularCalculatorModule", []); in a separate file, e.g. you can also put configuration or other initialization stuff there. Then include this file immediately after the angular.js inclusion.

Afterwards just use angular.module("AngularCalculatorModule").controller(...) (note the missing [] = module dependencies array).

answered Dec 9, 2015 at 13:31

Michael Rose

7,8203 gold badges24 silver badges27 bronze badges

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

Collectives™ on Stack Overflow

Problems with service injection in a AngularJS controller written in TypeScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related