Question

在Firefox中运行我的应用程序时出现以下错误，在Edge或Chrome中发生不的情况相同：

TypeError：必须使用| new |调用类构造函数栈跟踪：

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中存在一个与Angular结合使用本机ES6类支持的错误。这在FF版本55中得到修复。

请在此处查看错误报告： https://bugzilla.mozilla.org/show_bug.cgi?id=1216630

此处相应的AngularJS问题博客：https://github.com/angular/angular.js/issues/14240#issuecomment-197418167

或者，您可以在构建中包含ES6-＆gt; ES5转换步骤（例如使用Babel），因为本机ES6支持在旧浏览器版本上可能存在风险。

Angular Firefox（必须使用| new |调用类构造函数）

1 个答案: