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.

Improve this question
3
  • 1
    using maven to build the front end rather then grunt? I like your style, you crazy son of a gun Commented Feb 27, 2015 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 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. Commented Feb 27, 2015 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. To my knowledge with maven you have to hook it up to a jar somewhere (like the YUI stuff) Commented Feb 27, 2015 at 12:52

2 Answers 2

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

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..
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: errors.angularjs.org/1.2.27/$injector/…
Maybe this answer will help you to find the part of the code that is causing this issue.
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.
Also how can I test and make sure what percentage (or any unit) the performance has improved?
|
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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.