TypeError：クラスを関数として呼び出すことはできません。 - ES6 - Angular1.x - Webpack

Question

ESL、Angular Linter、およびBabelingを使用して、Angular 1.xアプリケーションで作業しています。私はこのエラーが表示されます： "TypeError：クラスを関数として呼び出すことはできません"、コンソールにはhtmlが正常に読み込まれます。

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">" 

最高の構文が正しいとわかります。私の最高の推測バベルはES5にtranspilingされ、特にこの：

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

ここでは、ソースが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; 

はloginNotifyServiceが対話するコントローラーです：

'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さらに詳しい説明や情報が必要な場合は、アドバイスをお願いします。

Answer 1

工場にサービスを変更することでこの問題を解決できました。ここでhttps://github.com/Gillespie59/eslint-plugin-angular

が特定のルールです： それが最初に起因する私は、このリンターから設定していたリンティングルールに工場出荷時に設定した

https://github.com/Gillespie59/eslint-plugin-angular/blob/master/docs/rules/no-service-method.md
（私はこれを無効にする必要がありました

正しく動作させるには、loginNotifyServiceコードの構造が必要です（現在書かれているように）。私はこの記事を読んだことにより、2つの違いをより明確に理解を得ることができた：

AngularJS : Factory and Service?

例：

また

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); 

、あなたはあなたの応答と洞察のため@Rhoden感謝します！

Answer 2

AngelaJSは、「表示」されていない限り、「蒸し」（コンパイル済み）サービスクラスをインスタンス化しません（下の呼び出しコードで示すように）。バベルでクラスをコンパイル

は、クラスが、クラスとして機能する機能はありませんので、バベルは、いくつかのチェックを作成します（ここでは、この機能：_classCallCheck）に機能と呼ばれるクラスを防ぐ（彼らは唯一「と呼ばれるべきであるとして、 'とnewキーワード）。関数invoke上

AngularJSは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; 
} 

。だから、 、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))(); 
} 

そして、あなたは"TypeError: Cannot call a class as a function"エラーが発生します。

編集：私は、そのコードをもう一度見て与えていた、あなたはおそらく、この仕事をするために、このようなクラスを宣言することができます。

class Foo { 
static get $$ngIsClass(){return true;} 
} 

これはtrueを返しisClassを強制し、それは次のようになりますnewというキーワードで呼び出されます。 （あなたがテストして、それがうまくいくことを確認できたら、私は感謝しています）。