0

I'm using ES6 codestyle and implement a sample module like this:

import angular from 'angular';
import { IndicatorSelectorComponent } from './indicatorSelector.component';
import './indicatorSelector.css';

export const IndicatorSelectorModule = angular
  .module('indicatorSelector', [])
  .component('indicatorSelector', IndicatorSelectorComponent)
  .name;

with this code for the component:

import templateUrl from './indicatorSelector.html';

export const IndicatorSelectorComponent = {
  templateUrl,
  controller: class IndicatorSelectorComponent {
    contructor($http) {
      'ngInject';
      this.$http = $http;
    }

    $onInit() {
      console.log(this.$http);
    }
  }
}

The console.log(this.$http) is returning undefined. I was suspecting that the problem was with my webpack code and ng-annotate, but I can see that the generated bunddle is including the annotation:

var IndicatorSelectorComponent = exports.IndicatorSelectorComponent = {
  templateUrl: _indicatorSelector2.default,
  controller: function () {
    function IndicatorSelectorComponent() {
      _classCallCheck(this, IndicatorSelectorComponent);
    }

    _createClass(IndicatorSelectorComponent, [{
      key: 'contructor',
      value: ["$http", function contructor($http) { // <==== HERE!
        'ngInject';

        this.$http = $http;
      }]
    }, {
      key: '$onInit',
      value: function $onInit() {
        console.log(this.$http);
      }
    }]);

    return IndicatorSelectorComponent;
  }()
};

But still it is not working. I tried to inspect on the module code a console.log(IndicatorSelectorComponent);

I can see that $inject is empty. I don't know what else to do. I appreciate any help on this.

Object
controller :function IndicatorSelectorComponent()
$inject :Array[0]
arguments : (...)
caller : (...)
length : 0
name : "IndicatorSelectorComponent"
prototype : Object
__proto__ : function ()
[[FunctionLocation]] : indicatorSelector.component.js:5
[[Scopes]] : Scopes[3]
templateUrl : "C:/Projetos/IndicadoresPCM/client/src/app/components/goals/indicatorSelector/indicatorSelector.html"
__proto__ : Object
rafrcruz
  • 117
  • 7
  • The resulting code doesn't make sense. ng-annotate makes `constructor` an array. While it certainly shouldn't. Obviously, it doesn't play well with Babel output. This is probably caused by the fact that controller is class expression and not declaration. The title doesn't reflect the case. The problem isn't ES6. It is ng-annotate/Babel relationship, and 'injection not working' is the consequence. – Estus Flask Nov 27 '16 at 13:23
  • thank you for the reply. Any suggestion on how I can deal with it? I'm following this style guide https://github.com/toddmotto/angular-styleguide so it seems to work for someone, but I searched for others facing this issue and no solution, using this way, comes up. anything I could do or test? – rafrcruz Nov 27 '16 at 16:33
  • Try to move a controller to class definition instead of class expression. Also see this https://github.com/olov/ng-annotate/issues/245 . I would suggest to dump ng-annotate if it won't work for you. It always was a hack, to be honest. – Estus Flask Nov 27 '16 at 16:44

1 Answers1

0

If using this way it will works.

import templateUrl from './indicatorSelector.html';

export const IndicatorSelectorComponent = {
  templateUrl,
  controller: function ($http) {
    "ngInject";
    this.$onInit = function () {
      console.log($http);
    };
  }
}

But still, would be very interesting to make it work with the class expression...

rafrcruz
  • 117
  • 7