schmod / babel-plugin-angularjs-annotate

Add Angular 1.x dependency injection annotations to ES6 code
http://schmod.github.io/babel-plugin-angularjs-annotate
MIT License
240 stars 29 forks source link

Simple component generating "target.get(...).filter is not a function" error #7

Closed ejbaker closed 8 years ago

ejbaker commented 8 years ago
(function(){
    "use strict";
    // define component
    var testFeedback = {
        controller: testFeedbackController,
    }
    // define controller
    function testFeedbackController() {
    }

    angular
        .module("test.feedback.pkg", [])
        // feedback
        .component("testFeedback", testFeedback)
        ;
})();

That's it, that's what I've stripped the code down to and it's still generating this mysterious error. If I swap it out to directive style, the error goes away. This is frustrating, since component support is exactly why I switched from ngAnnotate to this plugin...

(There is no 'filter' anywhere in the entire file, but even if I comment out literally everything except these lines... the error still happens. :\ )

schmod commented 8 years ago

The Error's coming from the bable plugin itself; not Angular (so filter in this case isn't an Angular filter).

It looks like I'm not correctly following references when defining components this way. I'll look into fixing this.

In the meantime, if you inline the object literal, it'll work.

(function(){
    "use strict";

    // define controller
    function testFeedbackController() {
    }

    angular
        .module("test.feedback.pkg", [])
        // feedback
        .component("testFeedback", {
          controller: testFeedbackController,
        });
})();

PS: I've made an in-browser tool to show how this plugin transforms various code samples, which can help troubleshoot issues like this one.

ejbaker commented 8 years ago

Thank you for your prompt response! It definitely seems to have resolved the issue.

Obviously this is a little bit less than ideal for complicated component definitions, but since the style I was using was already somewhat necessarily in violation of the best practices style guide for Angular (having to put the angular.module call at the bottom of the document, since variables don't get hoisted), it's not a terrible compromise. :)

schmod commented 8 years ago

Going to add this as a test case and try to fix in the next release. This should work, or at the very least, not cause a hard failure.

schmod commented 8 years ago

this should now be fixed in v0.5.0

ejbaker commented 8 years ago

Verified fixed! Thanks. :)