9

I am trying to minify javascripts and css files in my angularjs app using samaxes minify maven plugin. I am able to get all js & css minified and build a war file with maven, but while trying to open app url I get Error: [$injector:unpr] Unknown provider: aProvider <- a and my app does not work.

Below I am providing my pom plugin configuration

<plugin>
    <groupId>com.samaxes.maven</groupId>
    <artifactId>minify-maven-plugin</artifactId>
    <version>1.7.4</version>
    <executions>
        <execution>
            <id>min-js</id>
            <phase>prepare-package</phase>
            <goals>
                <goal>minify</goal>
            </goals>
        </execution>
    </executions>
    <configuration>
        <charset>UTF-8</charset>
        <skipMerge>true</skipMerge>
        <cssSourceDir>myapp/styles</cssSourceDir>
        <jsSourceDir>myapp/javascript</jsSourceDir>
        <jsEngine>CLOSURE</jsEngine>
        <closureLanguage>ECMASCRIPT5</closureLanguage>
        <closureAngularPass>true</closureAngularPass>
        <nosuffix>true</nosuffix>
        <webappTargetDir>${project.build.directory}/minify</webappTargetDir>
        <cssSourceIncludes>
            <cssSourceInclude>**/*.css</cssSourceInclude>
        </cssSourceIncludes>
        <cssSourceExcludes>
            <cssSourceExclude>**/*.min.css</cssSourceExclude>
        </cssSourceExcludes>
        <jsSourceIncludes>
            <jsSourceInclude>**/*.js</jsSourceInclude>
        </jsSourceIncludes>
        <jsSourceExcludes>
            <jsSourceExclude>**/*.min.js</jsSourceExclude>
        </jsSourceExcludes>
    </configuration>

</plugin>

<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-war-plugin</artifactId>
    <version>2.4</version>
    <configuration>
        <webResources>
            <resource>
                <directory>${project.build.directory}/minify</directory>
            </resource>
        </webResources>
    </configuration>
</plugin>

Directory structure

enter image description here

My controller structure

'use strict';

angular.module('myApp').controller('MyController', function($scope, $filter, $location, $interval, ngTableParams, $modal, $transition, myService, $timeout) {
   ...
});

Chrome console error

enter image description here

Does samaxes minify maven plugin support minifying angularjs apps or do I need to use any other alternatives?

Please help me in minifying js and css in my angularjs app.

  • 1
    using maven to build the front end rather then grunt? I like your style, you crazy son of a gun – atmd Feb 27 '15 at 12:28
  • @atmd: I am new to angularjs and do not know much on grunt. We have been using maven to create builds for our server code, and this app also uses java rest end point, which is packaged inside `WEB-INF>lib>[jar files]`. I went through [this article](https://www.erianna.com/using-grunt-to-minify-and-compress-assets) only till `Why Should I Use Grunt?` section and I only need minification of js and css, so I thought at this point I should not go with grunt just for minifying things. Please correct me if you still think I need to go with grunt. –  Feb 27 '15 at 12:38
  • No you've taken a understandable route. if you are using maven for the back end then there's a good argument for using it on the front end. The argument for grunt generally is to use a build tool written using the language your software is written in (i.e. grunt scripts are written in js) Grunt has plugins which are more focused on front end (pre-compilers, minifyers etc) for example a [angular focused minifyer](https://www.npmjs.com/package/grunt-ngmin). To my knowledge with maven you have to hook it up to a jar somewhere (like the YUI stuff) – atmd Feb 27 '15 at 12:52

2 Answers2

3

You are on the right track.

Note that when you minify a JavaScript code of a controller, all of its function arguments would be minified as well, and the dependency injector would not be able to identify services correctly.

It's possible to overcome this problem by annotating the function with the names of the dependencies, provided as strings, which will not get minified. There are two ways of doing it:

(1.) Create a $inject property on the controller function which holds an array of strings. For example:

function MyController($scope, $filter, $location, $interval, ngTableParams, $modal, $transition, myService, $timeout) {...}
MyController.$inject = ['$scope', '$filter', '$location', '$interval', 'ngTableParams', '$modal', '$transition', 'myService', '$timeout'];

(2.) Use an inline annotation where, instead of just providing the function, you provide an array. In your case it would look like:

angular.module('myApp').controller('MyController', ['$scope', '$filter', '$location', '$interval', 'ngTableParams', '$modal', '$transition', 'myService', '$timeout', function($scope, $filter, $location, $interval, ngTableParams, $modal, $transition, myService, $timeout) {
   ...
}]);

For more info please check out "A Note on Minification" section of this tutorial.

PrimosK
  • 13,848
  • 10
  • 60
  • 78
  • ok So I tried 2nd approach and used `angular.min.js` but I get `Error: [$injector:unpr] http://errors.angularjs.org/1.2.27/$injector/unpr?p0=aProvider%20%3C-%20a` error in chrome console. Will be checking your 1st approach and will get back again.. –  Feb 27 '15 at 16:57
  • 1
    Just to be sure... Did you clear browser's cache before trying 2nd approach? Side note: you should use same approach also when declaring directives and services. For more info see: http://errors.angularjs.org/1.2.27/$injector/unpr?p0=aProvider%20%3C-%20a – PrimosK Feb 27 '15 at 17:05
  • Maybe this [answer](http://stackoverflow.com/a/21787020/617996) will help you to find the part of the code that is causing this issue. – PrimosK Feb 27 '15 at 17:23
  • Thanks there were a few more places in services & directives, where I needed to make some changes. Also is it good to have all js & css files merged into 1 js & css file respectively? If so can you please point me to it. –  Mar 03 '15 at 05:02
  • Also how can I test and make sure what percentage (or any unit) the performance has improved? –  Mar 03 '15 at 06:39
  • An other alternative is to let closure generating the $inject statement by adding a annotation @ngInject. e.g.: ```/** @ngInject */ var controller = function($scope, $filter, etc) { ... }; angular.module('myApp').controller('MyController', controller);``` Note that to work you need to assign the function to a variable. – dcendents Aug 18 '15 at 21:36
2

Also be careful with reserved words in mvn, like 'then' and 'catch'. 

$http.get('some.json').then(convertResponse).catch(throwError);

Might be rewritten as: 

$http.get('some.json')['then'](convertResponse)['catch'](throwError);

Hopefully somebody can provide a better solution, this looks really nasty.

More on Missing name after . operator YUI Compressor for socket.io js files

Community
  • 1
  • 1
Chris Jager
  • 123
  • 9