Angular itkn error caused by directives defined with function outside array

Question

I'm using Angular 1.3.15, also have tried 1.2.28, along with angular bootstrap. Last night, after updating Chrome to v42.0.2311.90, I suddenly began seeing tons of angular itkn errors:

Error: [$injector:itkn] Incorrect injection token! Expected service name as string, got function ()
http://errors.angularjs.org/1.3.15/$injector/itkn?p0=function%20()
    at REGEX_STRING_REGEXP (angular.min.js?bust=undefined:63)
    at Object.invoke (angular.min.js?bust=undefined:4189)
    at angular.min.js?bust=undefined:6525
    at forEach (angular.min.js?bust=undefined:323)
    at Object.<anonymous> (angular.min.js?bust=undefined:6523)
    at Object.invoke (angular.min.js?bust=undefined:4204)
    at Object.enforcedReturnValue [as $get] (angular.min.js?bust=undefined:4056)
    at Object.invoke (angular.min.js?bust=undefined:4204)
    at angular.min.js?bust=undefined:4021
    at Object.getService [as get] (angular.min.js?bust=undefined:4162)

This wasn't happening before updating Chrome but I guess I can't say that's for sure related.

After poking through, I've found that any directives defined like this:

  .directive('modalTransclude', function () {
    return {
      // directive code
    };
  })

Will cause this itkn error. I console.logged the key in the $inject iterator in angular and it's returning the function of the directive itself rather than only strings like was clearly intended.

I've discovered that wrapping the function in an array, even without any strings defining the injections, it solves the issue:

  .directive('modalTransclude', [function () {
    return {
      // directive code
    };
  }])

However, this error is not happening on the angular bootstrap site, and I've tried this on both angular 1.3 and 1.2 versions.

I'll continue looking for any causes that are unique to my app, but does anyone have any idea what's causing this?

same thing happening for me on Chrome, although just for my bootstrap modals. Just tested on Firefox and they appear to be working there — , Apr 15 '15 at 15:16
I can confirm that this directive issue is only affecting my angular bootstrap stuff. Any custom directives I have on my own work fine, whether with or without brackets. — helion3, Apr 15 '15 at 15:24
Do you have http://ng-inspector.org/ installed in your chrome? For me, if I switch off ng-inspector, everything returns back to normal mode. Not sure what is exact reason of this, have no time to dive into it. This behaviour appeared very recently for me as well. — Egor Smirnov, Apr 15 '15 at 15:48
I do! I don't know why I didn't think about this. That solved the problem! If you want to post this as the answer I'll accept it. — helion3, Apr 15 '15 at 15:50
Done. Would be nice if someone could investigate the reason. — Egor Smirnov, Apr 15 '15 at 15:53
Agreed, though I'm less interested in using knowing it's somehow altering the angular injector/internals. — helion3, Apr 15 '15 at 15:58

score 6 · Accepted Answer · answered Apr 15 '15 at 15:53

6

If you have ng-inspector.org extension installed in chrome, it might be a reason. Just switch off ng-inspector browser extension.

I don't know exact reasons why it's not working with ng-inspector at the moment. If someone have time to look into this, it would be nice to submit bug to project involved (I suspect it's ng-inspector itself).

answered Apr 15 '15 at 15:53

Egor Smirnov

603
4
17

This is indeed an issue with version v0.5.9 of ng-inspector. Updating to v0.5.10 (should happen automatically when Chrome is restarted, or you can trigger the update manually by accessing chrome://extensions/ and clicking "Update extensions now"). I'm terribly sorry for everyone that was affected by this issue. – rev087 Apr 16 '15 at 08:39
I've noticed a similar issue with Batarang (0.10.7) enabled. $injector is undefined. Disabling the extension fixes it. ng-inspector: An error occurred attempting to invoke directive: myDirective TypeError: Cannot read property 'invoke' of undefined(…) – J. Andrew Laughlin May 31 '16 at 22:21

rev087 · Answer 2 · 2015-04-16T07:29:01.507

2

This is indeed an issue that surfaced with version 0.5.9 of ng-inspector (I'm its maintainer) which was released yesterday. I'm already working on a solution for this, and will release it shortly.

I'm terribly sorry for the inconvenience =(

Edit: Just published v0.5.10, should fix this issue. If you encounter further difficulties, feel free to open an issue at https://github.com/rev087/ng-inspector/

edited Apr 16 '15 at 07:29

answered Apr 16 '15 at 05:57

rev087

163
1
7

Thanks for confirming the fix! I feel terrible for all the people that must have lost hours trying to debug an issue that wasn't their fault to begin with =( – rev087 Apr 16 '15 at 08:35

score 0 · Answer 3 · answered Apr 15 '15 at 15:08

0

It should work, without defining the square brackets. The only reason of the square brackets is for js minification.

AngularJs Directives Link

answered Apr 15 '15 at 15:08

Matju

51
6

I know. But using the brackets solves this issue. It's only an issue in the latest Chrome. Firefox/Safari don't seem to be affected. – helion3 Apr 15 '15 at 15:21

score 0 · Answer 4 · answered Apr 16 '15 at 07:19

0

I reported yesterday the same issue at the ng-inspector github repo and there is already an attempt to fix it (still don't checked if it's working or not) https://github.com/rev087/ng-inspector/issues/95#issuecomment-93423284

answered Apr 16 '15 at 07:19

David Pelayo

158
10

Angular itkn error caused by directives defined with function outside array

4 Answers4