Angular-Favicon wird nicht angezeigt? So behebst du es
Angular kopiert statische Dateien nur, wenn die Build-Konfiguration es vorgibt. Ein Icon, das nicht vom assets-Eintrag in angular.json erfasst wird, erreicht dist nie. Der Build gelingt und die Datei ist nicht da.
Das assets-Array entscheidet, was existiert
Jedes andere Framework kopiert per Konvention ein ganzes Verzeichnis. Angular macht es per Konfiguration: Der assets-Eintrag des Build-Targets kopiert nur das, was er erfasst. Neuere Scaffolds richten ihn mit einem Glob auf ein public/-Verzeichnis; ältere listen einzelne Pfade auf, angefangen mit src/favicon.ico.
Nichts warnt dich, wenn das falsch ist. Legst du in einem älteren Projekt apple-touch-icon.png neben eine funktionierende favicon.ico, baut es sauber und liefert dann in der Produktion einen 404: favicon.ico war namentlich gelistet, deine neue Datei nicht.
Das assets-Glob (neuere Scaffolds)
"assets": [
{ "glob": "**/*", "input": "public" }
]Alles in public/ wird kopiert. In einem älteren Projekt enthält das Array Strings wie "src/favicon.ico", und du fügst pro Icon eine Zeile hinzu.
Angular-Favicon wird nicht angezeigt: FAQ
Warum wird mein Angular-Favicon nicht angezeigt?
Das Icon wird nicht vom assets-Eintrag in angular.json erfasst, es hat dist also nie erreicht. Sieh nach ng build in dist/ nach. Fehlt die Datei, füge sie dem assets-Array (oder dem public/-Glob) hinzu und baue neu.
Warum liefert es unter einem Unterpfad einen 404?
Ein href, der mit einem Schrägstrich beginnt, wird gegen den Domain-Stamm aufgelöst. Baue mit --base-href auf dein Unterverzeichnis gesetzt, damit das base-Tag in index.html korrekt ist, und schreibe die Icon-hrefs relativ, ohne führenden Schrägstrich.
Fügt @angular/pwa meine Icons hinzu?
Es erzeugt ein Manifest und Platzhalter-PNG-Icons und verdrahtet den Service Worker. Die Icons sind Platzhalter. Ersetze die Bilddateien an Ort und Stelle und behalte das erzeugte Manifest und die Asset-Einträge.