minifying JS and CSS in 6.2 causing errors

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?

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.

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

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?

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:73

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    at cd (http://localhost:4503/etc/clientlibs/myapp/clientlib-dependencies.min.cde41dcd9cd686fb1c5142e183cbf453.js:786:33)

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?

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.

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?).

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

Cheers!

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.