ngInject not working in components

[csvan]

• [x] I understand that GitHub issues are not for tech support, but for questions specific to this generator, bug reports, and feature requests.

Item	Version
generator-angular-fullstack	4.1
Node	6.9.1
npm	3.10.8
Operating System	Windows 7 Enterprise

Item	Answer
Transpiler	Babel
Markup	HTML
CSS	LESS
Router	ui-router
Client Tests	Jasmine
DB	None
Auth	N

Steps to reproduce:

1. Create a clean project with the above settings
2. Modify components/footer/footer.module.js so that it contains the following:

export class FooterComponent {
  /*@ngInject*/
  constructor($http){}
}

1. Run gulp serve

Expected: The FooterComponent should receive type annotations during the build process, and hence be correctly injected during the apps run phase.

Actual: App fails with:

Error: [$injector:strictdi] FooterComponent is not using explicit annotation and cannot be invoked in strict mode
http://errors.angularjs.org/1.5.8/$injector/strictdi?p0=FooterComponent
    at angular.js:68
    at Function.annotate [as $$annotate] (angular.js:3952)
    at injectionArgs (angular.js:4679)
    at Object.invoke (angular.js:4710)
    at $controllerInit (angular.js:10354)
    at nodeLinkFn (angular.js:9263)
    at compositeLinkFn (angular.js:8620)
    at compositeLinkFn (angular.js:8623)
    at compositeLinkFn (angular.js:8623)
    at compositeLinkFn (angular.js:8623)
    at publicLinkFn (angular.js:8500)
    at angular.js:1763
    at Scope.$eval (angular.js:17682)
    at Scope.$apply (angular.js:17782)
    at bootstrapApply (angular.js:1761)
    at Object.invoke (angular.js:4718)
    at doBootstrap (angular.js:1759)
    at Object.bootstrap (angular.js:1779)
    at app.js:33
    at HTMLDocument.trigger (angular.js:3207)
    at defaultHandlerWrapper (angular.js:3497)
    at HTMLDocument.eventHandler (angular.js:3485)

The above seems to indicate that the class was never properly annotated at all.

[csvan]

Update: this seems to be related to folder structure. ngInject is also used in app/main/main.component.js, and it very obviously works there (you can remove it to demonstrate this - the same error as above is thrown for the Main component in that case). However, it does not work when applied to any class under components/ even though the syntax is virtually identical.

[csvan]

Update: adding 'ngInject' inside the constructor resolves this, e.g.:

  constructor($http) {
    'ngInject';
  }

I still do not understand why the annotation works in the Main file but not the Footer however.

[nstuyvesant]

I've experienced this as well and worked around it using 'ngInject' instead /*@ngInject*/ (though prefer not to use workarounds).

Out of curiosity, did you bump ng-annotate-loader from 0.1.0 to 0.2.0?

[csvan]

Bumped all the deps, however that was a while after the workaround was already added, so not sure if it made a difference.

[hboylan]

Strange how the MainComponent uses:

/*@ngInject*/
constructor($state) {
  this.$state = $state;
}

While generated components instead require:

constructor($state) {
  'ngInject';
  this.$state = $state;
}