Can't inject a service using ES6 syntax

Question

I'm trying to import a service into a controller using the ES6 syntax but I'm getting injection problems

CategoriesService.js

export default class CategoriesService {
    constructor() {
        this.getCategories = function ($q) {
            var deferred = $q.defer();
            deferred.resolve([
                {
                    id: '1',
                    name: 'Category One',
                    slug: 'category_one',
                    profile: {
                        id: '1',
                        name: 'Thomas Wayne',
                        location: '1007 Mountain Drive, Gotham',
                        description: 'Dr. Thomas Wayne, one of the most respected patrons in all of Gotham City',
                        images: ['...', '...'],
                        featuredImage: '...'
                    }
                },
                {
                    id: '2',
                    name: 'Category Two',
                    slug: 'category_two',
                    profile: {
                        id: '2',
                        name: 'Martha Kane',
                        location: '1007 Mountain Drive, Gotham',
                        description: 'Martha Wayne (née Kane) was born into the Kane family, who were so rich that they allegedly "owned the half of Gotham that the Waynes don\'t"',
                        images: ['...', '...'],
                        featuredImage: '...'
                    }
                }
            ]);
            return deferred.promise;
        }
    }

}


CategoriesService.$inject = [];

CategoriesController.js

import CategoriesService from './CategoriesService';

export default class CategoriesController {
    constructor(CategoriesService) {
        CategoriesService.getCategories().then(getCategoriesSuccessFn, getCategoriesFailFn);

        function getCategoriesSuccessFn(data) {
            this.categories = data;
        }

        function getCategoriesFailFn() {
            console.error('Something went wrong');
        }
    }
}
CategoriesController.$inject = ['CategoriesService'];

error

angular.js:13424 Error: [$injector:unpr] Unknown provider: CategoriesServiceProvider <- CategoriesService
http://errors.angularjs.org/1.5.3/$injector/unpr?p0=CategoriesServiceProvider%20%3C-%20CategoriesService
    at angular.js:68
    at angular.js:4418
    at Object.getService [as get] (angular.js:4571)
    at angular.js:4423
    at getService (angular.js:4571)
    at injectionArgs (angular.js:4595)
    at Object.invoke (angular.js:4617)
    at $controllerInit (angular.js:10027)
    at nodeLinkFn (angular.js:8965)
    at angular.js:9362

Any idea what I'm missing here?

GG. · Accepted Answer · 2016-04-16 00:38:21Z

2

Even with ES6 import/export, you still have to register the service.

App.js

import CategoriesService from './CategoriesService';
import CategoriesController from './CategoriesController';

angular.module('app', [])
  .service('CategoriesService', CategoriesService)
  .controller('CategoriesController', CategoriesController);

answered Apr 16, 2016 at 0:38

GG.

22k14 gold badges93 silver badges133 bronze badges

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

1 Comment

chachan Over a year ago

I got the same problem with the controller and fixed it using the same approach. Thanks!

Collectives™ on Stack Overflow

Can't inject a service using ES6 syntax

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related