ES6 controller class with angular 1.5.5 has $onInit called before constructor

Bug

I'm using ES6 with angular 1.5.5 and using babel to convert to ES5.

export class ReportConfigColumnDialogController {
    constructor($mdDialog, column) {
        'ngInject';

        // fired after $onInit
        this.column = column;

        console.log(this.column.Alias);  // has expected value
    }

    $onInit() {
        // fired first
        console.log(this.column.Alias); // this.column undefined at this point
    }
}

According to the docs at https://code.angularjs.org/1.5.5/docs/guide/component:
$onInit() - Called on each controller after all the controllers on an element have been constructed

That's not what I'm seeing in my code. $onInit got called before the constructor.

BTW, the ES5 code generated by babel looks like this:

var ReportConfigColumnDialogController = exports.ReportConfigColumnDialogController = function () {
        ReportConfigColumnDialogController.$inject = ["$mdDialog", "column"];
        function ReportConfigColumnDialogController($mdDialog, column) {
            'ngInject';

            _classCallCheck(this, ReportConfigColumnDialogController);

            this.column = column;

            console.log(column);

            this.$mdDialog = $mdDialog;
        }

        _createClass(ReportConfigColumnDialogController, [{
            key: '$onInit',
            value: function $onInit() {
                this.aliasQuestion.Answer = this.column.Alias;
            }
        }, {
            key: 'save',
            value: function save() {}
        }, {
            key: 'close',
            value: function close() {
                this.$mdDialog.cancel();
            }
        }]);

        return ReportConfigColumnDialogController;
    }();

[gkalpak]

@opadillaintegrify, I wasn't able to reproduce it (here).
Could you create a live demo of the problem (you can form my CodePen or use anything else that works for you, e.g. plnkr, etc).

Here is a CodePen in which $onInit() doesn't get fired at all: https://codepen.io/anon/pen/YqvjLB. Click on Launch Dialog and see console logs.

That CodePen is a fork of https://codepen.io/marcysutton/pen/PwJrrG but with babel turned on and the DialogController converted to an ES6 class.

class DialogController {
  constructor($scope, $mdDialog){
    console.log('DialogController constructor');
  }

  $onInit() {
    console.log('DialogController $onInit');  // nothing in CodePen console
  }
}

Maybe my problem is specific to angular material design's dialog? I only see the problem when using ES6 classes as controllers to the dialog as shown in the code pen above. Typical controllers and components work correctly as demonstrated in your CodePen.

[dcherman]

Yep, looks like angular-material doesn't support the new lifecycle hooks for a variety of things right now.

https://github.com/angular/material/blob/master/src/core/services/compiler/compiler.js#L117

[gkalpak]

@dcherman is right. This is an issue with ngMaterial not supporting lifecycle hooks (yet).
Please, open an issue over there.

_{(BTW, classes or Babel don't seem to have anything to do with this afaict.)}