Annotation does not occur when I stop using decorators with BabelJS (indirect cause)

[nweldev]

When using the `/* @ngInject */ comment on an ES6 class' constructor, the annotation does not occur if I stop using decorators (indirect cause, of course).

The issue

input

var AppComponent =

/* @ngInject */
exports.AppComponent = function AppComponent($log, $mdSidenav) {
    _classCallCheck(this, AppComponent);

    $log.debug('App Component');
    this.toggleLeftMenu = MaterialUtil.buildToggler($mdSidenav, $log, 'main-left');
};

AppComponent.$$name = 'fooSeed';

AppComponent.$$config = {
    selector: 'foo-seed',
    templateUrl: _appComponent2.default.name,
    controller: AppComponent
};

expected output

var AppComponent =

/* @ngInject */
exports.AppComponent = ['$log', '$mdSidenav', function AppComponent($log, $mdSidenav) {
    _classCallCheck(this, AppComponent);

    $log.debug('App Component');
    this.toggleLeftMenu = MaterialUtil.buildToggler($mdSidenav, $log, 'main-left');
}; ]

AppComponent.$$name = 'fooSeed';

AppComponent.$$config = {
    selector: 'foo-seed',
    templateUrl: _appComponent2.default.name,
    controller: AppComponent
};

OR (better) :

var AppComponent =

/* @ngInject */
function AppComponent($log, $mdSidenav) {
    _classCallCheck(this, AppComponent);

    $log.debug('App Component');
    this.toggleLeftMenu = MaterialUtil.buildToggler($mdSidenav, $log, 'main-left');
};

AppComponent.$inject =  ['$log', '$mdSidenav'];

exports.AppComponent = AppComponent;

AppComponent.$$name = 'fooSeed';

AppComponent.$$config = {
    selector: 'foo-seed',
    templateUrl: _appComponent2.default.name,
    controller: AppComponent
};

actual output : no modification

var AppComponent =

/* @ngInject */
exports.AppComponent = function AppComponent($log, $mdSidenav) {
    _classCallCheck(this, AppComponent);

    $log.debug('App Component');
    this.toggleLeftMenu = MaterialUtil.buildToggler($mdSidenav, $log, 'main-left');
};

AppComponent.$$name = 'fooSeed';

AppComponent.$$config = {
    selector: 'foo-seed',
    templateUrl: _appComponent2.default.name,
    controller: AppComponent
};

FYI : ES6 Input

export class AppComponent {

    /* @ngInject */
    constructor($log, $mdSidenav) {
        $log.debug('App Component');
        this.toggleLeftMenu = MaterialUtil.buildToggler($mdSidenav, $log, 'main-left');
    }

}

AppComponent.$$name = 'fooSeed';

AppComponent.$$config = {
    selector: 'foo-seed',
    templateUrl: template.name,
    controller: AppComponent
};

The part which was working before

input

var AppComponent = exports.AppComponent = (_dec = (0, _router.Routes)([{ name: 'admin', path: '/admin', lazy: true, component: 'app/admin/admin.component' }, { name: 'dashboards', path: '/dashboards', component: _dashboards.DashboardComponent }, { name: 'forms', path: '/forms', lazy: true, component: 'app/demo-forms/demo-forms.component' }, { path: '/', component: _home.HomeComponent, useAsDefault: true }]), _dec2 = (0, _ng.Module)({
    name: 'fooSeed',
    dependencies: ['ui.router', 'oc.lazyLoad', 'ct.ui.router.extras', 'ngMaterial', 'restangular', _dashboards.DashboardComponent.$ngmodule.name],
    main: true,
    html5mode: {
        enabled: config.html5,
        requireBase: false
    },
    debug: true,
    configs: [Config.mdTheming]
}), _dec3 = (0, _core.Component)({
    selector: 'foo-seed',
    templateUrl: _appComponent2.default.name,
    directives: [_home.HomeComponent]
}), _dec(_class = _dec2(_class = _dec3(_class =

/* @ngInject */
function AppComponent($log, $mdSidenav) {
    _classCallCheck(this, AppComponent);

    $log.debug('App Component');
    this.toggleLeftMenu = MaterialUtil.buildToggler($mdSidenav, $log, 'main-left');
}) || _class) || _class) || _class);

Output

var AppComponent = exports.AppComponent = (_dec = (0, _router.Routes)([{ name: 'admin', path: '/admin', lazy: true, component: 'app/admin/admin.component' }, { name: 'dashboards', path: '/dashboards', component: _dashboards.DashboardComponent }, { name: 'forms', path: '/forms', lazy: true, component: 'app/demo-forms/demo-forms.component' }, { path: '/', component: _home.HomeComponent, useAsDefault: true }]), _dec2 = (0, _ng.Module)({
    name: 'fooSeed',
    dependencies: ['ui.router', 'oc.lazyLoad', 'ct.ui.router.extras', 'ngMaterial', 'restangular', _dashboards.DashboardComponent.$ngmodule.name],
    main: true,
    html5mode: {
        enabled: config.html5,
        requireBase: false
    },
    debug: true,
    configs: [Config.mdTheming]
}), _dec3 = (0, _core.Component)({
    selector: 'foo-seed',
    templateUrl: _appComponent2.default.name,
    directives: [_home.HomeComponent]
}), _dec(_class = _dec2(_class = _dec3(_class =

/* @ngInject */
["$log", "$mdSidenav", function AppComponent($log, $mdSidenav) {
    _classCallCheck(this, AppComponent);

    $log.debug('App Component');
    this.toggleLeftMenu = MaterialUtil.buildToggler($mdSidenav, $log, 'main-left');
}]) || _class) || _class) || _class);

FYI : ES6 Input

@Routes([
    { name: 'admin', path: '/admin', lazy: true, component: 'app/admin/admin.component' },
    { name: 'dashboards', path: '/dashboards', component: DashboardComponent },
    { name: 'forms', path: '/forms', lazy: true, component: 'app/demo-forms/demo-forms.component' },
    { path: '/', component: HomeComponent, useAsDefault: true }
])
@Module({
    name: 'fooSeed',
    dependencies: [
        'ui.router',
        'oc.lazyLoad',
        'ct.ui.router.extras',
        'ngMaterial',
        'restangular',
        DashboardComponent.$ngmodule.name
    ],
    main: true,
    html5mode: {
        enabled: config.html5,
        requireBase: false
    },
    debug: true,
    configs: [
        Config.mdTheming
    ]
})
@Component({
    selector: 'foo-seed',
    templateUrl: template.name,
    directives: [
        HomeComponent
    ]
})
export class AppComponent {

    /* @ngInject */
    constructor($log, $mdSidenav) {
        $log.debug('App Component');
        this.toggleLeftMenu = MaterialUtil.buildToggler($mdSidenav, $log, 'main-left');
    }

}

[olov]

245

[nweldev]

Thank you, I didn't saw that you choosed to end /* @ngInject */ at the same time. Everything is fine with "ngInject".