ng-inspector Error "Argument 'fn' is not a function" trying to invoke component as a directive

trafficstars

I'm getting error like this in console when use angular.compoent (v.1.5) ng-inspector: An error occurred attempting to invoke directive: seriesList Error: [ng:areq] Argument 'fn' is not a function, got Object(…)

Of course component defining object is not a function as for directive. angular.directive(name, function () { return {} }); versus angular.component(name, { });

Mar 25 '16 16:03 dimaShin

I am also running into this. The error is:

ng-inspector: An error occurred attempting to invoke directive: userProfile Error: [ng:areq] Argument 'fn' is not a function, got Object(…)

coming from dir = app.$injector.invoke(this.factory); in Service.js:23.

The full stack is

Uncaught Error: [ng:areq] Argument 'fn' is not a function, got Object(…) angular.js:68 
(anonymous function)                    @ angular.js:68
assertArg                               @ angular.js:1844
assertArgFn                             @ angular.js:1854
annotate                                @ angular.js:3880
injectionArgs                           @ angular.js:4586
invoke                                  @ angular.js:4617
(anonymous function)                    @ VM18244:1
InjectedScript._evaluateOn              @ (program):878
InjectedScript._evaluateAndWrap         @ (program):811
InjectedScript.evaluateOnCallFrame      @ (program):936
Service                                 @ ng-inspector.js:791
NGI.Service.Service.parseQueue          @ ng-inspector.js:893
Module                                  @ ng-inspector.js:1110
NGI.Module.Module.register              @ ng-inspector.js:1120
App                                     @ ng-inspector.js:981
NGI.App.App.bootstrap                   @ ng-inspector.js:1031
traverse                                @ ng-inspector.js:247

The value of this.factory is

{
  "templateUrl": "scripts/components/component/template.html",
  "controller": [
    function Controller()
  ],
  "bindings": {
    "data": "<"
  }
}

I'm assuming this just means ng-inspector hasn't been updated to work with the new angular components syntax. I would be willing to work on this but I'm not exactly sure where to start looking. Could it be as simple as doing

if(this.factory && this.factory.controller) {
  dir = this.factory
}

Mar 29 '16 20:03 manbearwiz

+1 same issue here. Actually I'm surprised this issue didn't crop up on GitHub sooner.

May 04 '16 11:05 mischkl

I looked at this a little bit and was able to get inspector to recognize components as directives by lifting some code from the angular source. Not sure if I'm on the right track here but its progress.

https://github.com/manbearwiz/ng-inspector/commit/0fffe6681ddc3007ffd28c511074a5f8cb0ac83e

May 06 '16 08:05 manbearwiz

I worked on this a little bit more and it seems to be pretty functional. No more errors are logged and inspecting controller members works as expected. I would appreciate feed back and some other users trying before I submit a PR.

https://github.com/manbearwiz/ng-inspector/commit/924f78baf520da855a9cac892760d7a9f2d08123

May 06 '16 14:05 manbearwiz

Heh - I finally found this issue after hours of investigating :) It would be great to have it fixed - @manbearwiz : how can I test the fix?

Nov 11 '16 15:11 hindsholm

Either pull down my repo and load it as an unpacked extension or copy this try-catch block over the corresponding block on your installed extension.

Nov 11 '16 20:11 manbearwiz

I tried patching my installed extension at C:\Users\xxx\ChromeProfile\Default\Extensions\aadgmnobpdmgmigaicncghmmoeflnamj\0.5.10_1\ng-inspector.js but it didn't change anything so it is probably not the right file. I am not familiar with hacking Chrome extensions, so I am probably doing something wrong.

Nov 15 '16 13:11 hindsholm

Is @rev087 No longer working on this extension? If not it seems like it's time to fork. I just hit this as well.