angular-component, Angular 1.3, and Batarang

[BigGillyStyle]

Todd-

Not sure where to go on this one, but I'm willing to submit an issue or even try my hand at a PR. We've got a fairly large Angular 1.3.20 app at work, and I've just started using your angular-component library (thanks!...and I have thoroughly enjoyed your Master Class as well). When enabling the Batarang extension against my app now, however, I get the following error: TypeError: Cannot read property 'apply' of undefined That is traced to this line in Angular source:

https://github.com/angular/angular.js/blob/9360aa2d27fd4b35c377ecff3eea2a656ecf7114/src/auto/injector.js#L768

So based on my debugging I'm guessing providerInjector.get("$compileProvider")["component"] is somehow undefined...only when the checkbox in the Batarang extension is set to "Enabled". Do you have any idea if this is an issue with Angular, Batarang, and/or your component library?

[toddmotto]

Hey man. So I don't know if this is because Batarang isn't liking the fact I monkey-patched the .module() method, or it's a bug inside the .component() polyfill. Now, there is one bug that I'm aware of inside the .component() polyfill, I've just had no luck fixing it :(

You're definitely including the polyfill after you load the angular-v1.3.20.js library?

[BigGillyStyle]

Yes, we're running a Rails 4.2.7 back-end using the asset pipeline (Sprockets gem), and we specify the require directives as such:

//= require angular
//= require angular-ui-router
//= require angular-ui-bootstrap-tpls
//= require angular-resource
//= require angular-route
//= require angular-sanitize
//= require angular-elastic
//= require angular-scroll-glue
//= require angular-component.js.js

We actually have no problems using your library with several "components", so without the Batarang extension enabled it's all working fine.

One thing that may be happening is that when you click the checkbox to enable the Batarang extension, it reloads the page (effectively reloading the Angular app, of course), and the extension itself seems to include the angular-hint library, which then grabs the angular.js source version included with the app. However, since it's only grabbing that and not your library, then that may be the problem.

I made a feeble attempt at including your source with Angular's into one file, but my couple attempts at that did not solve the problem.

[toddmotto]

Hmmmm. I'm sorry man, this is a super tough one!

[BigGillyStyle]

No worries. I really didn't want to create an issue on your repo, and I don't think it's warranted at this point. I appreciate all your blog articles, courses, and everything in the Angular ecosystem. If I come upon a solution, I'll try my best to remember this AMA and update you accordingly.

[BigGillyStyle]

And for those that may come upon this issue in a search, here's the full stack trace in my Chrome JS console:

Uncaught Error: [$injector:modulerr] Failed to instantiate module liveworld due to:
TypeError: Cannot read property 'apply' of undefined
    at runInvokeQueue (http://myserver.com/assets/angular/angular.self.js?body=1:4126:34)
    at http://myserver.com/assets/angular/angular.self.js?body=1:4134:11
    at forEach (http://myserver.com/assets/angular/angular.self.js?body=1:327:20)
    at loadModules (http://myserver.com/assets/angular/angular.self.js?body=1:4116:5)
    at createInjector (http://myserver.com/assets/angular/angular.self.js?body=1:4042:11)
    at doBootstrap (http://myserver.com/assets/angular/angular.self.js?body=1:1456:20)
    at Object.angular.resumeBootstrap (http://myserver.com/assets/angular/angular.self.js?body=1:1485:12)
    at maybeBootstrap (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:569:11)
http://errors.angularjs.org/1.3.20/$injector/modulerr?p0=liveworld&p1=TypeE…nsion%3A%2F%2Fighdmehidhipcmcojjgiloacoafjmpfk%2Fdist%2Fhint.js%3A569%3A11)

[toddmotto]

:) thanks for the kind words! Yes do let me know. Will close this off :)