inject service into controller es6 syntax

Question

I am trying to write angular app using new es6 syntax. Having all the controllers and views logic in place and working, Now I want to create a simple shared service . Here is my service:

var moduleName = 'app.services';
class EventService{
    constructor($http, moment){
        this.$http = $http;
        this.baseUrl = '/api/events';     
    }

    getEvents(){
    return this.$http({method: 'GET', url: this.baseUrl});
    }
}


EventService.$inject = ['$http', 'moment'];

angular.module(moduleName, [])
    .factory('eventSrv', EventService);

export default moduleName;

app.js for registering modules:

// Import angular
import 'angular';
// Material design css
import 'angular-material/angular-material.css';
// Icons
import 'font-awesome/css/font-awesome.css';
// Animation
import angularAnimate from 'angular-animate';
// Materail Design lib
import angularMaterial from 'angular-material';
// Router
import angularUIRouter from 'angular-ui-router';
//angular messages
import ngMessages from 'angular-messages';
//angular md-table css
import 'angular-material-data-table/dist/md-data-table.min.css';
//angular md-table
import 'angular-material-data-table/dist/md-data-table.min';
//moment
import 'moment';
import 'angular-moment';

//modules
import home from './home/home.module';
import event from './events/event.module';
import sidenav from './sidenav/sidenav.module';
import eventService from './shared/services/events-service';

// Project specific style
import './scss/bootstrap.scss'

// Create module
export const mod = angular.module('app', [
    angularMaterial,
    angularAnimate,
    angularUIRouter,
    'angularMoment',
    'md.data.table',
    eventService,
    home,
    event,
    ngMessages,
    sidenav
]);

mod.config(($stateProvider,$urlRouterProvider) => {
    $stateProvider.state('public', {
        url: "/public",
        abstract: true,
        views: {
            'sidenav': {
                templateUrl: require("./sidenav/sidenav.html"),
                controller: "SidenavController as sidenav"
            }
        }
    });
    $urlRouterProvider.when('', ['$state', '$match', function($state, $match){
        $state.go('public.home');
    }]);

});

I want to provide/inject the service into my home controller, which looks like this:

class HomeController {
    constructor($scope, eventSrv) {
        'ngInject';
        var vm = this;
    }
}

HomeController.$inject = ['eventSrv'];
export default HomeController;

Home module:

import HomeConfig from './home.config';
import HomeController from './home.controller';
require('./home.scss');

let homeModule = angular.module('app.home', []);

homeModule.config(HomeConfig);
homeModule.controller('HomeController', HomeController);

export default homeModule = homeModule.name

I am getting the following error when I am injecting the service eventSrv into homecontroller :

TypeError: Cannot call a class as a function

what am I doing wrong in my imports or configuration?

Answer 1

eventSrv service should be service :

angular.module(moduleName, [])
    .service('eventSrv', EventService);

factory services are supposed to be used with factory functions which are called directly by injector, ES6 classes should be new ed.

Answer 2

angular.module(moduleName, [])
    .service('eventSrv', ()=> new EventService);