Expand my Community achievements bar.

SOLVED

minifying JS and CSS in 6.2 causing errors

Avatar

Level 2

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

1 Accepted Solution

Avatar

Correct answer by
Employee
11 Replies

Avatar

Level 7

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.

Avatar

Level 8

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.

Avatar

Level 2

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

Cheers!

Avatar

Level 2

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

Avatar

Level 3

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.

Avatar

Correct answer by
Employee

Avatar

Level 3

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?

Avatar

Level 3

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?

Avatar

Employee

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

Avatar

Level 3

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.

Avatar

Level 2

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?