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

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!


This seems to be an 'understanding' error, AngularJS will not instantiate a 'transpiled'(compiled) service class unless it 'see' that it is a es6 class (as shown by the invoke code below).

Compiled classes by babel aren't classes, but functions acting as classes, so babel creates some checks (this function here: _classCallCheck) to prevent a class to be called as function (as they only should be 'called' with new keyword).

AngularJS on the invoke function uses this code:

function isClass(func) {
  // Support: IE 9-11 only
  // IE 9-11 do not support classes and IE9 leaks with the code below.
  if (msie || typeof func !== 'function') {
    return false;
  }
  var result = func.$$ngIsClass;
  if (!isBoolean(result)) {
    result = func.$$ngIsClass = /^class\b/.test(stringifyFn(func));
  }
  return result;
}

Which fails to detect babel compiled classes. So, this validation also fails:

if (!isClass(fn)) {
    // http://jsperf.com/angularjs-invoke-apply-vs-switch
    // #5388
     return fn.apply(self, args);
} else {
    args.unshift(null);
    return new (Function.prototype.bind.apply(fn, args))();
}

And you get a "TypeError: Cannot call a class as a function" error.

Edit: i was giving a look again at that code and you probably can declare a class like this to make this work:

class Foo {
  $$ngIsClass = true;
  // or
  static get $$ngIsClass = true;
}

This will force isClass to return true, and it will be called with the new keyword. (if you could test and confirm that it works i would be grateful).