【发布时间】：2018-11-23 01:01:53
【问题描述】：
我正在使用 Angular 6，无法为我的应用设置网站图标。它根本不存在。这是我的angular.json 文件：
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"frontend": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "../wwwroot/dist",
"deployUrl": "/dist/",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.app.json",
"polyfills": "src/polyfills.ts",
"assets": [
"src/assets",
"src/favicon.ico"
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "frontend:build",
"proxyConfig": "proxy.conf.json"
},
"configurations": {
"production": {
"browserTarget": "frontend:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "frontend:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"scripts": [],
"styles": [
"src/styles.scss"
],
"assets": [
"src/assets",
"src/favicon.ico"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"frontend-e2e": {
"root": "",
"sourceRoot": "",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "./protractor.conf.js",
"devServerTarget": "frontend:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"e2e/tsconfig.e2e.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "frontend",
"schematics": {
"@schematics/angular:component": {
"prefix": "app",
"styleext": "scss"
},
"@schematics/angular:directive": {
"prefix": "app"
}
}
}
在index.html 我有<link rel="icon" type="image/x-icon" href="favicon.ico">。
favicon.ico 位于src/favicon.ico。
我已经按照人们在类似问题中的建议多次尝试清除现金并重新启动应用程序，但没有帮助。
还尝试将虚拟参数添加到 index.html 中的 favicon，例如 href="favicon.ico?any=param"
我应该怎么做才能让它工作？谢谢。
【问题讨论】：
-
这里的确切错误是什么？它会找到图像还是为 favicon.ico 获得 404？您可以尝试执行“ng build”并检查“dist”文件夹。当正确的 favicon.ico 被复制到文件夹中时，这可能是一个缓存问题。
-
我没有收到任何错误。 vrowser 中的 Favicon 只是空的
-
在您的
angular.json中，尝试使用favicon.ico而不是src/favicon.ico。这就是我的应用程序的设置方式，并且 favicon 位于 src/ 目录中。 -
@rhavelka 如果我这样做 - 我会收到错误
The favicon.ico asset path must start with the project source root. -
好的，我有我的
"root": "src"，它解释了该错误以及为什么我的任何文件都没有 src 前缀。但这并不能解释为什么您的 favicon 不起作用...我假设您有一个 favicon.ico，它与 favicon.png 不同。您的标签上是否会显示默认图标之类的内容？
标签： javascript angular favicon angular6