CODEWITHSUNDEEP
angularjsgoogle-chromemime-typesaemminify
Sunny
Sunny

Reputation: 932

Error on minification in console "Refused to execute because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled"

I need to minify all my js files(using Adobe Experience Manager) in the folder 'js', which also consists of 'angular.min.js'.

While trying to do that, it throws an error in chrome as

Refused to execute script 'angular.min.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

How could I fix this?

Upvotes: 2

Views: 2624

Answers (1)

Jens
Jens

Reputation: 21530

I would advice you to separate third party libraries like Angular from your own client libraries. Because you usually do not want to minify those third party libraries, but you do want to minify your own client libraries.

Example:

etc/
├── clientlibs/
|   └── myproject/
|       └── vendor/
|           └── angular/
|               ├── angular.min.js
|               ├── .content.xml
|               └── js.txt
└── designs/
    └── myproject/
        └── myclientlib/
            ├── js/
            |   └── myclientlib.js
            ├── .content.xml
            └── js.txt

Then you could use the following clientlib definitions:

/etc/clientlibs/myproject/vendor/angular/.content.xml:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
      jcr:primaryType="cq:ClientLibraryFolder"
      categories="[myproject.angular]"
      jsProcessor="[default:none]"/>

The jsProcessor="[default:none]" disables minification.

/etc/designs/myproject/myclientlib/.content.xml:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
      jcr:primaryType="cq:ClientLibraryFolder"
      categories="[myproject.myclientlib]"
      jsProcessor="[min:gcc]"/>

The jsProcessor="[min:gcc]" enables minification by Googles Closure Compiler.

You can easily use both of those clientlibs in your HTL (former Sightly) templates:

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
    <sly data-sly-call="${clientlib.js @ categories='myproject.angular'}"/>
    <sly data-sly-call="${clientlib.js @ categories='myproject.myclientlib'}"/>
</sly>

Note: You can choose the clientlib category names myproject.angular and myproject.myclientlib freely. You do not have to use those names in my example. But I would advice using some kind of namespace like myproject.

Upvotes: 4

Related Questions