Why will my Javascript run fine normally, but minnified, it won't?

Question

I have a webapp that I'm developing that uses a front-end of HTML + Javascript (Angular 1.5.0) + CSS. The website performs fine when I run it on my localhost. I have an /index.html file. This file imports my javascript code like this: <script src="/app/app.js"></script>

But now I have just implemented automated linting, uglifying etc. using Grunt. Grunt very nicely converts my single Javascript file (/app/app.cs) to a minnified one (/dist/js/app.min.js). I changed my /index.html to include the minnified Javascript instead: <script src="/dist/js/app.min.js"></script>. But now the application stops working. And in the Browser's dev console, I see the following error:

angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:unpr] Unknown provider: a
http://errors.angularjs.org/1.5.0/$injector/unpr?p0=a
    at http://127.0.0.1:8080/bower_components/angular/angular.js:68:12
    at http://127.0.0.1:8080/bower_components/angular/angular.js:4397:19
    at getService (http://127.0.0.1:8080/bower_components/angular/angular.js:4550:39)
    at injectionArgs (http://127.0.0.1:8080/bower_components/angular/angular.js:4574:58)
    at Object.invoke (http://127.0.0.1:8080/bower_components/angular/angular.js:4596:18)
    at runInvokeQueue (http://127.0.0.1:8080/bower_components/angular/angular.js:4497:35)
    at http://127.0.0.1:8080/bower_components/angular/angular.js:4506:11
    at forEach (http://127.0.0.1:8080/bower_components/angular/angular.js:321:20)
    at loadModules (http://127.0.0.1:8080/bower_components/angular/angular.js:4487:5)
    at createInjector (http://127.0.0.1:8080/bower_components/angular/angular.js:4409:19)
http://errors.angularjs.org/1.5.0/$injector/modulerr?p0=raptorApp&p1=Error%…F%2F127.0.0.1%3A8080%2Fbower_components%2Fangular%2Fangular.js%3A4409%3A19)

Why will the normal Javascript file work fine, but the one minified by Grunt won't? How can I fix it?

Using grunt-ng-annotate before minnifying it worked for me. Thanks! https://www.npmjs.com/package/grunt-ng-annotate — Saqib Ali, Apr 25 '16 at 04:46

score 6 · Answer 1 · edited May 23 '17 at 12:07

6

Your angular component is being minified and there is no way to know what service to inject. You should decorate your controllers and other pieces to allow Angular to work properly. Read up on it here: Angularjs minify best practice

edited May 23 '17 at 12:07

Community

1
1

answered Apr 25 '16 at 01:10

Daniel A. White

187,200
47
362
445

Using grunt-ng-annotate before minnifying it worked for me. Thanks! https://www.npmjs.com/package/grunt-ng-annotate – Saqib Ali Apr 25 '16 at 04:46

Why will my Javascript run fine normally, but minnified, it won't?

1 Answers1