Angular · Not showing
Angular favicon 不显示?这样修复
Angular 只有在构建配置告诉它时才会复制静态文件。一个没被 angular.json 里 assets 条目匹配到的图标永远进不了 dist。构建会成功,而文件不在那儿。
assets 数组决定了什么东西存在
其他框架都按约定复制整个目录。Angular 则按配置来做:构建目标的 assets 条目只复制它匹配到的东西。较新的脚手架用一个 glob 指向 public/ 目录;较老的则逐一列出路径,从 src/favicon.ico 开始。
配置出错时没有任何提示。在一个较老的项目里,把 apple-touch-icon.png 放在能正常工作的 favicon.ico 旁边,构建照样通过,然后在生产环境 404:favicon.ico 是按名字列出的,而你的新文件没有。
assets glob(较新的脚手架)
"assets": [
{ "glob": "**/*", "input": "public" }
]public/ 里的任何东西都会被复制。在较老的项目里,这个数组存的是像 "src/favicon.ico" 这样的字符串,每个图标你要加一行。
Angular favicon 不显示:常见问题
为什么我的 Angular favicon 不显示?
图标没被 angular.json 里的 assets 条目匹配到,所以它从没进入 dist。运行 ng build 之后去 dist/ 里看。如果文件不在那儿,就把它加进 assets 数组(或 public/ 的 glob)再重新构建。
为什么它在子路径下 404?
以斜杠开头的 href 会相对域名根路径解析。用 --base-href 设成你的子目录来构建,让 index.html 里的 base 标签正确,并把图标 href 写成相对路径,不带前导斜杠。
@angular/pwa 会添加我的图标吗?
它会搭建一个 manifest 和占位用的 PNG 图标,并接好 service worker。那些图标是占位符。就地替换图片文件,保留生成的 manifest 和 asset 条目。