TypeError: Cannot call a class as a function - ES6 - Angular1.x - Webpack

Issue

Working on an Angular 1.x app, using ES6, an Angular Linter, and Babel for transpiling. I am receiving this error: "TypeError: Cannot call a class as a function" in the console, though the html loads just fine.

TypeError: Cannot call a class as a function
at _classCallCheck (bundle.js:97664)
at Object.loginNotifyService (bundle.js:97670)
at Object.invoke (bundle.js:23052)
at Object.enforcedReturnValue [as $get] (bundle.js:22885)
at Object.invoke (bundle.js:23052)
at bundle.js:22844
at getService (bundle.js:22993)
at injectionArgs (bundle.js:23018)
at Object.invoke (bundle.js:23044)
at $controllerInit (bundle.js:29012) "<div ui-view="" class="ng-scope">"

Best I can tell, syntax is correct. My best guess is Babel transpiling to ES5, specifically this:

function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
    }
}

Here is the source JS:

    'use strict';

class loginNotifyService {
    constructor (notify) {
        this.loginNotifyService = notify;
    }

    info (message, config) {
        config = config || {};
        config.message = message;
        config.classes = 'alert alert-info ' + (config.classes || '');
        return this.loginNotifyService(config);
    }

    warn (message, config) {
        config = config || {};
        config.message = message;
        config.classes = 'alert alert-warning ' + (config.classes || '');
        return this.loginNotifyService(config);
    }

    error (message, config) {
        config = config || {};
        config.message = message;
        config.classes = 'alert alert-danger ' + (config.classes || '');
        return this.loginNotifyService(config);
    }

    success (message, config) {
        config = config || {};
        config.message = message;
        config.classes = 'alert alert-success ' + (config.classes || '');
        return this.loginNotifyService(config);
    }

    notify (config) {
        return this.loginNotifyService(config);
    }

    closeAll () {
        return this.loginNotifyService.closeAll();
    }
}

// loginNotifyService.$inject = ['notify'];
/* @ngInject */
export default loginNotifyService;

Here is the Controller that the loginNotifyService interacts with:

'use strict';

class loginController {
    constructor ($state, loginNotifyService, loginService) {
        this.$state = $state;
        this.loginNotifyService = loginNotifyService;
        this.loginService = loginService;

        this.loginInProgress = false;
    }

    login () {
        this.loginNotifyService.closeAll();
        this.loginInProgress = true;
        this.loginService.login(this.email, this.password).then(
            () => {
                this.loginInProgress = false;
                this.$state.go('dashboard');
            },
            (error) => {
                this.loginInProgress = false;
                this.showErrors(error);
            }
        );
    }

    showErrors (error) {
        this.errors = error;
        this.loginNotifyService.error(error);
    }
}

// loginController.$inject = ['$state', 'loginNotifyService', 'loginService'];
/* @ngInject */
export default loginController;

LMK if further clarification or info needed, and thank you for any advice.

Solution

I was able to resolve this issue by changing the factory to a service. It was initially set as a factory due to a linting rule that I had set from this linter:

https://github.com/Gillespie59/eslint-plugin-angular

Here is the specific rule:

https://github.com/Gillespie59/eslint-plugin-angular/blob/master/docs/rules/no-service-method.md
(I had to disable this specific rule in order to make change from factory to service)

The structure of the loginNotifyService code needs to be a service in order to work correctly (as it is written currently). I was able to get a clearer understanding of the difference between the two by reading this post:

AngularJS : Factory and Service?

EXAMPLE:

angular
.module('commonModule', [           
    uiRouter,
    cgNotify,
    ngAnimate, 
    ngMaterial,
    ngMessages, 
    ngSanitize,
    ngAria,
    'navRoute',
    'mdTheme',
])

// ALL OF THE SERVICES BELOW WERE PREVIOUSLY FACTORIES.
// CHANGING "loginNotifyService" TO A SERVICE INSTEAD,
// FIXED THE "TypeError: Cannot call a class a function" ERROR!

.service('authService', authService)
.value('loginConfigService', loginConfigService)
.service('loginNotifyService', loginNotifyService)
.service('loginService', loginService)
.service('resetPassService', resetPassService)
.component('login', loginComponent)
.component('resetPass', resetPassComponent);

Also, thank you @Rhoden for your response and insights!

Answered By - maxmiles