角火狐（類的構造函數必須調用|新|）

Question

我跑我在Firefox的應用程序時，同樣也不發生在邊緣得到下面的錯誤，或Chrome：

TypeError: class constructors must be invoked with |new| Stack-Trace:

h/<.invoke@http://localhost:8080/js/angular.min.js:44:169 
wf/this.$get</</<@http://localhost:8080/js/angular.min.js:94:33 
n@http://localhost:8080/js/angular.min.js:69:42 
ga/<@http://localhost:8080/js/angular.min.js:80:323 
h/<@http://localhost:8080/js/angular.min.js:134:467 
Mf/this.$get</m.prototype.$digest@http://localhost:8080/js/angular.min.js:145:417 
Mf/this.$get</m.prototype.$apply@http://localhost:8080/js/angular.min.js:149:111 
l@http://localhost:8080/js/angular.min.js:102:87 
wg/</A.onload@http://localhost:8080/js/angular.min.js:107:489 

附加上下文：我是Angular的新手，我沒有太多想法從哪裏開始修復或調試。

我main.js看起來是這樣的：

angular.module('appointmentApp') 
    .component('main', { 
    templateUrl: 'app/main.html', 
    controller: MainController 
    }); 

問： 有人能告訴我如何去調試和解決這個瀏覽器的具體問題？

編輯：更多的代碼

'use strict'; 
 

 
(function() { 
 

 
class MainController { 
 

 
constructor($http,$mdMedia,$mdDialog) { 
 
    this.message = 'Hello'; 
 
    this.$http=$http; 
 
    this.appointment = []; 
 
    this.slots = []; 
 
    this.$mdMedia = $mdMedia; 
 
    this.$mdDialog = $mdDialog; 
 
    //... 
 
    } 
 

 
    
 
    save(appointment){ 
 
    //... 
 
    }); 
 
     
 
    } 
 
    
 
    $onInit(){ 
 
    var vm = this; 
 
    this.$http.get('/api/data').then(response=>{ 
 
     this.data=response.data; 
 
     this.dates = this.allot(this.slots,this.days,this.appointments); 
 
    }); 
 
    } 
 

 
    
 

 
allot(slots, days, appointments){ 
 
//... 
 
} 
 

 

 
    showAdvanced(slot) { 
 
     var vm = this; 
 
    var useFullScreen = (this.$mdMedia('sm') || this.$mdMedia('xs')) && this.customFullscreen; 
 
    this.$mdDialog.show({ 
 
     controller: function($scope,$mdDialog,slot){ 
 
      $scope.customer = {}; 
 
      $scope.customer.slot = slot; 
 
     $scope.answer = function(answer){ 
 
      $mdDialog.hide(answer); 
 
     }; 
 
     }, 
 
     templateUrl: 'app/customer.html', 
 
     locals : { 
 
      slot : slot 
 
     }, 
 
     clickOutsideToClose:true, 
 
     fullscreen: useFullScreen 
 
    }) 
 
    .then(function(answer) { 
 
     answer.date = answer.slot.date; 
 
     vm.save(answer); 
 
    }); 
 
    
 
    } 
 
    
 
    getColor($index) { 
 
    var _d = ($index + 1) % 11; 
 
    var bg = ''; 
 

 
    switch(_d) { 
 
     case 1:  bg = 'green';  break; 
 
     case 2:  bg = 'darkBlue'; break; 
 
     default:  bg = 'yellow';  break; 
 
    } 
 

 
    return bg; 
 
    } 
 
    
 

 
} 
 

 
angular.module('appointmentApp') 
 
    .component('main', { 
 
    templateUrl: 'app/main.html', 
 
    controller: MainController 
 
    }); 
 

 
})();

Answer 1

有在Firefox中關於原生ES6級的支持結合角的錯誤。這是固定的FF版本55.

見bug報告在這裏： https://bugzilla.mozilla.org/show_bug.cgi?id=1216630

以及相應的AngularJS問題博客在這裏：https://github.com/angular/angular.js/issues/14240#issuecomment-197418167

或者您可以在一個ES6-> ES5 transpilation一步你（例如與Babel合作），因爲原生ES6支持在舊版瀏覽器上可能會有風險。