web-dev-qa-db-fra.com

favicon ne fonctionne pas dans l'application angular

C'est en dessous du code qui est pour un favicon personnalisé

 <link rel="shortcut icon" sizes="16x16" href="favicon-16x16.png" type="image/png" />

dans angular.cli

"assets": [
        "assets",
        "favicon-16x16.png"
      ],

  • Cela fonctionne pour cette URL (menu principal): http://localhost:4200/maintenance

  • Mais cela ne fonctionne pas pour cette URL (sous-menu): http://localhost:4200/maintenance/colors

ÉDITER:

De plus, cela ne fonctionne pas avec l'URL de favicon complète href="../src/favicon-16x16.png"

Structure des dossiers:

enter image description here

J'ai essayé de mettre tous les types d'URL de mon ancienne question: Différent entre ./, ../, ../../, ~/sur le chemin du fichier (URL) dans asp.net

Mais ça ne m'aide pas.

angularurlpathfavicon
10
Ramesh Rajendran

Selon ce que vous dites, cela fonctionne sur "menu principal" et non sur "sous-menu", il semble que votre dossier src principal s'appelle "/ maintenance". Vous devriez donc essayer de l'utiliser comme racine de base.

essayez:

<link rel="shortcut icon" sizes="16x16" href="/maintenance/favicon-16x16.png" type="image/png" />
6
MennyMez

Essayez de l'ajouter au dossier des ressources

"assets": [
        "assets",
        "./src/favicon-16x16.png"
      ],

Et puis le favicon comme

<link rel="shortcut icon" sizes="16x16" href="favicon-16x16.png" type="image/png" />
4
Rahul Singh

J'ai eu un problème similaire et j'ai dû utiliser un chemin absolu pour favicon. Vous pouvez essayer d'utiliser un chemin absolu vers votre application (ou un serveur de contenu/CDN dédié).

Il serait utile de montrer également ce qui se trouve dans le dossier de l'application afin que nous puissions voir comment les chemins/maintenance et/maintenance/colors sont résolus (sont-ils des chemins de dossier? angular?). Dans les deux cas, un chemin absolu serait la solution la plus simple pour que vous puissiez passer à des choses plus productives.

3
mchan

Vous utilisez une URL relative. Cela signifie que la première page traduit l'url de favicon en: http: // localhost: 4200/favicon-16x16.png et la seconde en http: // localhost: 4200/maintenance/favicon-16x16 .png .

donc mieux utiliser

<link rel="icon" sizes="16x16" href="/favicon-16x16.png" type="image/x-icon" />
3
Benjamin Keller

Votre première configuration est très bien. J'ai obtenu exactement le même comportement que vous dans Internet Explorer 11. Même après avoir supprimé le cache, etc. Dans FireFox, l'icône ne change pas du tout. N'a pas essayé de supprimer le cache et l'historique car c'est mon navigateur principal. Dans Chrome cela fonctionne très bien. Yeey Chrome.

Je suppose donc que vous utilisez Internet Explorer et Internet Explorer stocke le cache dans Windows lui-même. Vous pouvez utiliser Windows "Nettoyage de disque" (je ne sais pas si je l'ai traduit correctement) pour nettoyer ce cache. Après cela, le problème a été résolu.

Lien pour Windows 1

TLDR ça marche très bien. C'est juste un problème de mise en cache.

3
Robin Dijkhof

Autant que je peux voir dans votre structure de dossiers, votre angular-cli.json est dans le dossier racine, donc référençant favicon-16x16.png ne fonctionnera pas comme "favicon-16x16.png" dans tous les cas, cela pourrait être le problème que cela fonctionne sur le site racine, mais pas sur les sous-répertoires, essayez plutôt comme ceci:

"assets": [
        "assets",
        "/src/favicon-16x16.png"
      ],

Et dans votre href du lien ajouter/avant favicon-16x16.png donc ça ressemble à:

<link rel="shortcut icon" sizes="16x16" href="/favicon-16x16.png" type="image/png" />

Le problème n'est peut-être pas là du tout, c'est peut-être la façon dont vous avez écrit un autre code, essayez de revenir en arrière dans le code où d'autres choses sont appelées et voyez s'il y a des problèmes logiques, par exemple une fonction ou une autre une partie du code qui doit s'exécuter n'est pas appelée du tout. (et je suppose que vous n'avez aucun problème ou erreur de synthax puisque le programme lui-même fonctionne)

2
MirzaS

Considérez le fait que les favicons sont toujours fortement mis en cache. Même le rechargement de la fenêtre avec le nettoyage du cache peut ne pas vous aider. Essayez d'ajouter un paramètre get au chemin du favicon, par exemple:

<link rel="icon" sizes="16x16" href="some-path/favicon-16x16.png?v=2" type="image/x-icon" />
1
Mike Kovetsky

De la réponse @KingpinEX, j'ai ajouté un favicon séparé pour l'URL normale et l'URL relative

<link rel="shortcut icon" sizes="16x16" href="/favicon-16x16.png" 
type="image/png" />
<link rel="shortcut icon" sizes="16x16" href="/maintenance/favicon-
16x16.png" type="image/png" />

Après ces changements, j'ai fait un rafraîchissement forcé. Maintenant, cela fonctionne comme prévu.

0
Ramesh Rajendran