web-dev-qa-db-fra.com

Échec de décodage de la police téléchargée, erreur d'analyse OTS le Angular 6 applications déploient avec nginx

J'ai déployé le dossier dist angular avec la structure suivante sur ngnix. Mais obtenir l'erreur Failed to decode downloaded font: Host/rfid/fontawesome-webfont.af7ae505a9eed503f8b8.woff2?v=4.7.0; OTS parsing error: invalid version tag.

Voici comment j'ai inclus le font-awesome.

package.json

"dependencies": {
-------
"font-awesome": "^4.7.0",
--------
}

angular.json

"styles": [
-----,
"node_modules/font-awesome/scss/font-awesome.scss",
-----
]

Voici le chemin de l'endroit où je déploie le dossier dist.

/user/www/data/rfid/dist

Voici mon fichier de configuration nginx default.conf.

proxy_cache_path /tmp/nginx levels=1:2 keys_zone=nginx_cache_zone:10m inactive=60m;
proxy_cache_key "$scheme$request_method$Host$request_uri";

client_max_body_size 20M;
proxy_read_timeout 600;

server {
    listen 80 default_server;
    server_name something;
    location /rfid/ {
      alias /user/www/data/rfid/dist/;
      try_files $uri$args $uri$args/ /rfid/index.html;
   }
}

Permettez-moi également d'inclure ce que ma construction ressemble.

 Angular 6 app dist

Qu'est-ce que j'oublie ici? Merci d'avance.

Edit: S'il s'agit du problème de la chaîne de requête ajoutée à l'URL recherchant un fichier, que puis-je faire si je spécifie uniquement la dépendance et ajoute le fichier sass?

angularnginxangular6
5
आनंद

Avec ce type de problèmes, la meilleure chose à faire est de vérifier le suivi des problèmes dans le référentiel des dépendances. 84% du temps, vous trouverez quelqu'un d'autre qui a rencontré le même problème.

J'ai laissé tomber votre erreur dans le suivi des problèmes de font-awesome et il semblerait que certaines personnes aient rencontré un problème similaire:

Essayez de supprimer la chaîne de requête ?v=4.6.3 de votre CSS.

Exemple:

@font-face {
  font-family: 'FontAwesome';
  src: font-url("font-awesome/fonts/fontawesome-webfont.eot");
  src: font-url("font-awesome/fonts/fontawesome-webfont.eot?#iefix") format('embedded-opentype'), font-url("font-awesome/fonts/fontawesome-webfont.woff2") format('woff2'), font-url("font-awesome/fonts/fontawesome-webfont.woff") format('woff'), font-url("font-awesome/fonts/fontawesome-webfont.ttf") format('truetype'), font-url("font-awesome/fonts/fontawesome-webfont.svg#fontawesomeregular") format('svg');
  font-weight: normal;
  font-style: normal;
}

J'espère que cela pourra aider.

3
Andrew Hill

Avait le même problème avec l'OP que j'ai introduit Font Awesome 4.7.0 en tant que dépendance NPM sans aucun contrôle pour modifier le font-url.

Nous avons fini par modifier la configuration de try_files de Nginx afin de rechercher également $uri sans le $args.

Donc de:

try_files $uri$args $uri$args/ /rfid/index.html;

vous pouvez aller avec:

try_files $uri$args $uri$args/ $uri $uri/ /rfid/index.html;

Assurez-vous de bien comprendre les implications pour le reste de votre site si vous utilisez cette approche.

Une autre option serait de mettre à niveau vers Font Awesome 5.x, qui n'utilise plus de chaînes de version, comme dans le problème commentaire et ceci du responsable.

0
Voicu