title: Angular Firefox (class constructors must be invoked with |new|)
body: <p>I get the following error when running my application in Firefox, the same does <strong>not</strong> happen in Edge,or Chrome:</p>
  
  <blockquote>
    <p>TypeError: class constructors must be invoked with |new| Stack-Trace:</p>
  </blockquote>
  
  <pre><code>h/&lt;.invoke@http://localhost:8080/js/angular.min.js:44:169
  wf/this.$get&lt;/&lt;/&lt;@http://localhost:8080/js/angular.min.js:94:33
  n@http://localhost:8080/js/angular.min.js:69:42
  ga/&lt;@http://localhost:8080/js/angular.min.js:80:323
  h/&lt;@http://localhost:8080/js/angular.min.js:134:467
  Mf/this.$get&lt;/m.prototype.$digest@http://localhost:8080/js/angular.min.js:145:417
  Mf/this.$get&lt;/m.prototype.$apply@http://localhost:8080/js/angular.min.js:149:111
  l@http://localhost:8080/js/angular.min.js:102:87
  wg/&lt;/A.onload@http://localhost:8080/js/angular.min.js:107:489
  </code></pre>
  
  <p>Additional Context: I am new to Angular, and I don't have much of an idea where to start to fix or debug this.</p>
  
  <p>My main.js looks like this:</p>
  
  <pre><code>angular.module('appointmentApp')
    .component('main', {
      templateUrl: 'app/main.html',
      controller: MainController
    });
  </code></pre>
  
  <p><strong>Question:</strong>
  Can someone advise me on how to go about debugging and resolving this browser specific issue?</p>
  
  <p><strong>Edit: Some More Code</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>'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=&gt;{
          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'))  &amp;&amp; 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
    });
  
  })();</code></pre>
  </div>
  </div>
  </p>