0

I'm running into some issues with famous-angular when minified.

A couple of the PRs I submitted yesterday were attempts to fix this, but these don't appear to have resolved the issue.

When built without minfication, everything works as expected.

When built with minification, but removing the dependency on 'famous.angular' from my app module, the app degrades gracefully to angular only, so the layout is borked, but the underlying angular app works as expected, no errors.

When built with minification, and the app module depends on 'famous.angular', the app does not load at all, with the following error:

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module famous.angular due to:
Error: [$injector:unpr] Unknown provider: t
http://errors.angularjs.org/1.2.23/$injector/u...<omitted>...2)

By employing this method, I was able to determine which function was not getting minified correctly, and tripping up Angular'S dependency injection:

function LocationHashbangInHtml5Url(appBase, hashPrefix) { /* ... */ }

This is in the core angular file - angular.js, and it does indeed minify correctly in other instances. So I am not sure why when I include 'famous.angular' in my app module, this introduces the error.

Anyone know whaty is amiss here?

Demo of problem:

git clone git@github.com:bguiz/browserify-gulp-starter.git
cd browserify-gulp-starter
npm install famous
bower install --save angular angular-route famous-angular
# edit gulpoptions.js
# appName: 'app',
# appFolder: './src-famousangular/app/',
gulp serve-dist
Community
  • 1
  • 1
bguiz
  • 27,371
  • 47
  • 154
  • 243
  • Is it related to this post [this][1] [1]: http://stackoverflow.com/questions/18782324/angularjs-minify-best-practice – Sridhar Chidurala Sep 03 '14 at 02:53
  • @SridharChidurala yes indeed, it has to do with DI. FYI, I am using [ng-annotate](https://github.com/olov/ng-annotate) on my app code. `famous.angular` appears to not need it, as the its functions are wrapped appropriately. This is what I haven't been able to figure out. – bguiz Sep 03 '14 at 04:15
  • from the link provided by Sridhar find ng-annotate. – sss Sep 03 '14 at 04:54
  • @Noypi I am already using ng-annotate. In any case I have [solved](http://stackoverflow.com/a/25636528/194982) the problem at hand. It turned out to be a bug in famous-angular code, for which I have just submitted a patch. – bguiz Sep 03 '14 at 05:02

1 Answers1

0

I submitted these two PR's to famous-angular previously, thinking that I had caught all of the $inject scenarios:

Turns out that there was a third one that I had missed, and have now submitted a patch for:

In my question above, I said function LocationHashbangInHtml5Url(appBase, hashPrefix) { /* ... */ } in angular/angular.js was the function that was not minifying correctly. This was incorrect, and the culprit was in fact a provider in famous-angular/src/scripts/directives/fa-input.js.

For the curious, here is the process that I used to figure the above out. As an added bonus, I happen to have discovered an additional technique to use when debugging dependency injection errors in minified AngularJs apps.

It turns out that the technique that I linked to above ( https://stackoverflow.com/a/25126490/194982 ) does not always work correctly.

What did work in the end, was to traverse up the execution stack, until we get to the invoke() function, as described in that technique. Then, instead of inspecting only fn, look in the Scope Variables tab in the the developer tools, and inspect every scope member which is a function.

This casts a wider net, and results in more things which need to be inspected; but was necessary in this case, and I suspect might apply in others.

Community
  • 1
  • 1
bguiz
  • 27,371
  • 47
  • 154
  • 243