minifying JS and CSS in 6.2 causing errors

[jackie_chan_]

Hi folks,

Hoping someone can help me with this task.  As you can see by the title, I'm trying to minify the JS for our site and all of it's associated components in AEM 6.2.

We are using angular 1.5.5 across the site and components, and when I go to the AEM Web Console Configuration > Adobe Granite HTML Library Manager and check the Minify option, when we hit the site, I'm seeing issues in my JS console:

Could someone point me in the right direction of how to minify the site.js that's generated?

Thanks!

Jackie

[antoniom5495929]

Hi,

it seems that minify is not able to minify your site clientlib. When the algorithm used by AEM (yui compressor) is not able to minify a javascript inside your clientlib the clientlib.min is not created so you get a 404.

You need to test your javascript with the following link [0] in order to find the rule that doesn't allow yui compressor to create you minified clientlib.

[0] http://99webtools.com/yui-compressor.php#output

Let us know.

[leeasling]

the most common cause of this i've found is that you're using a reserved word as a variable name or function name.  If you check the error log, you'll see the first time it errors it'll give you a pointer close to the word it failed on.

[jackie_chan_]

Thanks everyone for the help! I'll give these a go and update here!

Cheers!

[jackie_chan_]

Quick update: Looks like YUI isn't able to handle the angular .catch() functions and as a result, the minification breaks.  Without going back and changing all of our code, it doesn't look like we can use the OOTB minification in AEM (unless someone here has some other suggestions/recommendations?).

[JoseBerciano]

I just came across this issue in AEM 6.3 and I can confirm it is still reproducible.

From Angular 1.6.0 onwards the YUI compressor does not like some of the syntax and it simply fails when compressing, for any previous AngularJS versions it works fine.

I just verified the AngularJS code against Refresh-SF - Online JavaScript and CSS Compressor

I guess we will have to put a reference to the CDN link instead of adding the framework to our client libs? It does not seem to be a nice way of dealing with the problem, can anybody shed some light on this?

Regards,

Jose.

[Feike_Visser1 · Accepted solution]

Please check this article: http://blogs.perficient.com/adobe/2017/07/10/how-to-use-the-google-closure-compiler-with-aem6-2/?utm...

http://blogs.perficient.com/adobe/2017/07/10/how-to-use-the-google-closure-compiler-with-aem6-2/?utm...

This explains how to use GCC instead of YUI.

[JoseBerciano]

Thanks Feike, changing to gcc makes the clientlib to be compiled without problems.

Unfortunately, the minification breaks my code:

clientlib-base.min.a5dee06….js:7 Uncaught Error: [$injector:modulerr] Failed to instantiate module myapp.app due to:

Error: [$injector:unpr] Unknown provider: p

http://errors.angularjs.org/1.6.5/$injector/unpr?p0=p

    at http://localhost:4503/etc/clientlibs/myapp/clientlib-base.min.a5dee066c92fe7ac2ccc76cf9a0828ca.js:7:...

    at http://localhost:4503/etc/clientlibs/myapp/clientlib-base.min.a5dee066c92fe7ac2ccc76cf9a0828ca.js:43...

    at d (http://localhost:4503/etc/clientlibs/myapp/clientlib-base.min.a5dee066c92fe7ac2ccc76cf9a0828ca.js:41...)

    at e (http://localhost:4503/etc/clientlibs/myapp/clientlib-base.min.a5dee066c92fe7ac2ccc76cf9a0828ca.js:41...)

    at Object.invoke (http://localhost:4503/etc/clientlibs/myapp/clientlib-base.min.a5dee066c92fe7ac2ccc76cf9a0828ca.js:42...)

    at d (http://localhost:4503/etc/clientlibs/myapp/clientlib-base.min.a5dee066c92fe7ac2ccc76cf9a0828ca.js:40...)

    at http://localhost:4503/etc/clientlibs/myapp/clientlib-base.min.a5dee066c92fe7ac2ccc76cf9a0828ca.js:40...

    at m (http://localhost:4503/etc/clientlibs/myapp/clientlib-base.min.a5dee066c92fe7ac2ccc76cf9a0828ca.js:8:...)

    at g (http://localhost:4503/etc/clientlibs/myapp/clientlib-base.min.a5dee066c92fe7ac2ccc76cf9a0828ca.js:39...)

    at ob (http://localhost:4503/etc/clientlibs/myapp/clientlib-base.min.a5dee066c92fe7ac2ccc76cf9a0828ca.js:44...)

http://errors.angularjs.org/1.6.5/$injector/modulerr?p0=myapp.app&p1=Er…feater%2Fclientlib-base.min....)

    at http://localhost:4503/etc/clientlibs/myapp/clientlib-base.min.a5dee066c92fe7ac2ccc76cf9a0828ca.js:7:...

    at http://localhost:4503/etc/clientlibs/myapp/clientlib-base.min.a5dee066c92fe7ac2ccc76cf9a0828ca.js:43...

    at d (http://localhost:4503/etc/clientlibs/myapp/clientlib-base.min.a5dee066c92fe7ac2ccc76cf9a0828ca.js:41...)

    at e (http://localhost:4503/etc/clientlibs/myapp/clientlib-base.min.a5dee066c92fe7ac2ccc76cf9a0828ca.js:41...)

    at Object.invoke (http://localhost:4503/etc/clientlibs/myapp/clientlib-base.min.a5dee066c92fe7ac2ccc76cf9a0828ca.js:42...)

    at d (http://localhost:4503/etc/clientlibs/myapp/clientlib-base.min.a5dee066c92fe7ac2ccc76cf9a0828ca.js:40...)

    at http://localhost:4503/etc/clientlibs/myapp/clientlib-base.min.a5dee066c92fe7ac2ccc76cf9a0828ca.js:40...

    at m (http://localhost:4503/etc/clientlibs/myapp/clientlib-base.min.a5dee066c92fe7ac2ccc76cf9a0828ca.js:8:...)

    at g (http://localhost:4503/etc/clientlibs/myapp/clientlib-base.min.a5dee066c92fe7ac2ccc76cf9a0828ca.js:39...)

    at ob (http://localhost:4503/etc/clientlibs/myapp/clientlib-base.min.a5dee066c92fe7ac2ccc76cf9a0828ca.js:44...)

http://errors.angularjs.org/1.6.5/$injector/modulerr?p0=myapp.app&p1=Er…feater%2Fclientlib-base.min....)

    at http://localhost:4503/etc/clientlibs/myapp/clientlib-base.min.a5dee066c92fe7ac2ccc76cf9a0828ca.js:7:...

    at http://localhost:4503/etc/clientlibs/myapp/clientlib-base.min.a5dee066c92fe7ac2ccc76cf9a0828ca.js:40...

    at m (http://localhost:4503/etc/clientlibs/myapp/clientlib-base.min.a5dee066c92fe7ac2ccc76cf9a0828ca.js:8:...)

    at g (http://localhost:4503/etc/clientlibs/myapp/clientlib-base.min.a5dee066c92fe7ac2ccc76cf9a0828ca.js:39...)

    at ob (http://localhost:4503/etc/clientlibs/myapp/clientlib-base.min.a5dee066c92fe7ac2ccc76cf9a0828ca.js:44...)

    at c (http://localhost:4503/etc/clientlibs/myapp/clientlib-base.min.a5dee066c92fe7ac2ccc76cf9a0828ca.js:22...)

    at Xc (http://localhost:4503/etc/clientlibs/myapp/clientlib-base.min.a5dee066c92fe7ac2ccc76cf9a0828ca.js:22...)

    at we (http://localhost:4503/etc/clientlibs/myapp/clientlib-base.min.a5dee066c92fe7ac2ccc76cf9a0828ca.js:21...)

    at HTMLDocument.<anonymous> (http://localhost:4503/etc/clientlibs/myapp/clientlib-base.min.a5dee066c92fe7ac2ccc76cf9a0828ca.js:34...)

    at cd (http://localhost:4503/etc/clientlibs/myapp/clientlib-dependencies.min.cde41dcd9cd686fb1c5142e183cbf4...)

The configuration I have been using for the Adobe Granite HTML Library Manager is the following:

<?xml version="1.0" encoding="UTF-8"?>

<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"

    jcr:primaryType="sling:OsgiConfig"

    htmllibmanager.minify="{Boolean}true"

    htmllibmanager.debug="{Boolean}false"

    htmllibmanager.gzip="{Boolean}true"

    htmllibmanager.maxage="{Long}60"

    htmllibmanager.timing="{Boolean}true"

    htmllibmanager.forceCQUrlInfo="{Boolean}false"

    htmllibmanager.maxDataUriSize="{Long}-1"

    htmllibmanager.debug.console="{Boolean}true"

    htmllibmanager.debug.init.js="window.CQ_initial_log_level='INFO';"

    htmllibmanager.defaultthemename="default"

    htmllibmanager.clientmanager="granite.clientlibrarymanager"

    htmllibmanager.path.list="[/apps,/etc,/libs]"

    htmllibmanager.excluded.path.list="[/etc/commerce/classifications,/etc/commerce/collections,/etc/commerce/payment-methods,/etc/commerce/products,/etc/commerce/shipping-methods,/etc/reports/auditreport,/etc/reports/compreport,/etc/segmentation,/etc/taskmanagement,/etc/workflow/instances]"

    htmllibmanager.longcache.patterns=""

    htmllibmanager.longcache.format="lc-%s-lc"

    htmllibmanager.processor.js="min:gcc"

    htmllibmanager.processor.css="min:yui"

/>

Only when setting htmllibmanager.minify="{Boolean}true" I can see the error shown above.

Any thoughts?

[cwalter]

Great hint!!!

I wonder that I can't find any reference to this within the official docs. Did I miss this feature at the 6.2 release-notes or somewhere else?

[Feike_Visser1]

Any chance you can share a sample-package for this?

[JoseBerciano]

Just giving you an update with my workaround to this.

AngularJS needs to be coded in a certain way in order to be able to be minified otherwise the code breaks, as explained very well in this video AngularJS Dependency Injection And Minification - YouTube

In a nutshell, I created a new config file for production environment under

/apps/myproject/config.prod/com.adobe.granite.ui.clientlibs.impl.HtmlLibraryManagerImpl.xml and set the value

htmllibmanager.processor.js="min:gcc"     

Aside from that I use gulp-ng-annotate in order to make sure all my Angular code follows the proper way of defining dependency injection, concatenate all js in one single file and place it in my clientlib.

After changing the configuration of the Granite HTML Clientlib Manager I had some issues with the previously cached clientlibs. To solve that I removed all folders below /var/clientlibs

Possibly not a necessary step but I also restarted the bundle Adobe Granite UI Clientlibs just for making sure my changes were taking place.

Thanks all for collaborating.

[Riyaz_Ahmed_Mohd]

Hi,

I am working on AEM 6.3. With the minify using min:gcc, I am able to see minified js, but not the css.

The file is renamed as .min.css, but the css is not minified.

Any thoughts?