Erreur de minification dans la console "Refusé d'exécuter car son type MIME ('text/html') n'est pas exécutable, et la vérification stricte du type MIME est activée"

Question

Je dois minifier tous mes fichiers js (en utilisant Adobe Experience Manager) dans le dossier 'js', qui comprend également 'angular.min.js'.

Tout en essayant de le faire, il renvoie une erreur en chrome comme

Refuse d'exécuter le script 'angular.min.js' parce que son type MIME ('text/html') n'est pas exécutable, et la vérification stricte du type MIME est activée.

Comment pourrais-je résoudre ce problème?

Answer 1

Je vous conseille de séparer les bibliothèques tierces comme Angular de vos propres bibliothèques clientes. Parce que vous ne voulez généralement pas réduire ces bibliothèques tierces, mais vous voulez minimiser vos propres bibliothèques clientes.

Exemple:

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

Ensuite, vous pouvez utiliser les définitions de clientlib suivantes:

/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]"/> 

Le jsProcessor="[default:none]" désactive 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]"/> 

Le jsProcessor="[min:gcc]" permet minification par Googles fermeture du compilateur.

Vous pouvez facilement utiliser ces deux clientlibs dans vos modèles HTL (anciens Sightly):

<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: Vous pouvez choisir le nom de la catégorie clientlib myproject.angular et myproject.myclientlib librement. Vous n'avez pas besoin d'utiliser ces noms dans mon exemple. Mais je conseillerais d'utiliser une sorte d'espace de noms comme myproject.