How to properly access AngularJS service in es6

Question

I'm trying to access the properties of my service, I think theres something wrong with the way I'm injecting the service into my class. I get the following error message when running my app

angular.js:13424 ReferenceError: CouponsService is not defined

at CouponsComponent.$onInit (coupons.controller.js:13)

...

Service

angular.module('couponGeneratorApp')
  .service('CouponsService', function () {
    // AngularJS will instantiate a singleton by calling "new" on this function
    this.amount_type = null;
    this.amount = null;
    this.has_min = null;
    this.min_order = null;
  });

Controller

(function() {

    class CouponsComponent {
        constructor($state, CouponsService) {
            this.test = 'hello';
            this.state = $state;

            this.couponParams = {};
        }

        $onInit() {
            console.log(CouponsService);
        }

        processParams() {
            if (!this.couponParams.amount || this.couponParams.amount <= 0) {
                alert('Enter a valid amount');
            } else if (this.couponParams.has_min && (!this.couponParams.min_order || this.couponParams.min_order < 0)) {
                alert('Enter a valid min order');
            } else {
                CouponsService.amount_type = this.couponParams.amount_type;
                CouponsService.amount = this.couponParams.amount;
                CouponsService.has_min = this.couponParams.has_min;
                if (CouponsService.has_min) CouponsService.min_order = this.couponParams.min_order;
                this.state.go('coupons.login');
            }
        }
    }


    angular.module('couponGeneratorApp')
        .component('couponsForm', {
            templateUrl: 'app/coupons/form.html',
            controller: CouponsComponent
        });

    angular.module('couponGeneratorApp')
        .component('couponsLogin', {
            templateUrl: 'app/coupons/login.html',
            controller: CouponsComponent
        });
})();

Answer 1

The issue is with the scope of the variable. When you inject it into an ES6 class, the constructor method doesn't make the variable available to all other methods. So just like you set $state to this.$state , you need to do the same for any injected services that other methods will use.

class CouponsComponent {
    constructor($state, CouponsService) {
        this.test = 'hello';
        this.state = $state;
        this.CouponsService = CouponsService;

        this.couponParams = {};
    }

    $onInit() {
        console.log(this.CouponsService);
    }

    // Rest of class
}

Also recommend to use ngAnnotate so your build tool can help make the injection work better.

Answer 2

You have to decorate your class with the injectable service.

Add:

CouponComponent.$inject = ['$state', 'CouponService'];