How to minify famous.angular without DI errors?

370 Views Asked by At

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 [email protected]: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
1

There are 1 best solutions below

0
On

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.