Meteor + Angular + ES2015 NOT WORKING

Hey,

I am working on converting my Angular app over to Meteor after the recent announcement for full support of Angular and ES2015. However, I it seems that ES2015 classes do not work properly. Here is an example:

angular.module('gsn.home')
    .controller('HomeCtrl', HomeController);

  class HomeController {

  /*@ngInject*/
  constructor($modal) {

    this.$modal = $modal;

    this.loginModal = this.$modal({
      show: false,
      controller: 'LoginCtrl',
      controllerAs: 'vm',
      templateUrl: 'client/login/login.modal.ng.html',
      placement: 'center',
      container: 'body',
      animation: 'am-fade-and-scale'
    });
  }

  showLoginModal() {
    this.loginModal.$promise.then(this.loginModal.show);
  }
}

If I register the class as as a controller above the controller definition I get an error saying HomeCtrl is not defined. It is as though variable housing is not working, which may have to do with the class being converted into a function expression. But if I register the controller after the class definition I get an error saying “cannot read property ‘prototype’ of undefined.”

Previously I was using System.js and jspm to import the class into the component app file and registered the class as a controller in a very similar fashion. With meteor it doesn’t appear that there is support for ES2015 module loading. In fact, the compiler throws an error saying that ‘export’ is a reserved word.

Short of using an ES5 constructor function, how can I get Meteor and Angular to play well with ES2015 classes?

I’m adding this very late answer for anyone who might still be struggling with what would appear to be, but is actually not, a problem with ES2015 and Meteor.

The reason the above example is not working, is that ES6/ES2015 classes, unlike ES5 functions, are not hoisted to the top of the module or function in which they are declared. This is by design.

To get your example to work you’d have to move the angular.module(...) statement after the class declaration.

I found that I had to move the class declaration above the controller registration and I had to var or let the class locally:

let HomeCtrl = class HomeController {};

angular.module('gsn.home')
    .controller('HomeCtrl', HomeCtrl);