在 index.html 上添加清单 Json
Posted
技术标签:
【中文标题】在 index.html 上添加清单 Json【英文标题】：Adding Manifest Json on index.html 【发布时间】：2021-05-04 06:31:05 【问题描述】：我正在尝试在 Angular 上实现 firebase 通知。但是，当我在 src/ 添加 manifest.json 并在 index.html 中将其引用为 <link rel="manifest" href="./manifest.json">
但是浏览器给了我两个错误 404 not found 和
清单：行：1，列：1，语法错误
当我用 dom 检查它并通过一个新选项卡打开它时，它被重定向到我的索引而不加载资源我尝试了一些解决方案，但它们似乎都不起作用。当我在索引上评论该行时，错误似乎才消失。
我目前正在使用角度版本 7.1.0
angular.json
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects":
"Ang7":
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics":
"@schematics/angular:component":
"styleext": "scss"
,
"architect":
"build":
"builder": "@angular-devkit/build-angular:browser",
"options":
"outputPath": "dist/Ang7",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets",
"src/manifest.json"
],
"styles": [
"src/assets/css/w3.scss",
"node_modules/ngx-toastr/toastr.css",
"src/assets/css/styles.scss"
],
"scripts": []
,
"configurations":
"production":
"fileReplacements": [
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
]
,
"serve":
"builder": "@angular-devkit/build-angular:dev-server",
"options":
"browserTarget": "Ang7:build"
,
"configurations":
"production":
"browserTarget": "Ang7:build:production"
,
"extract-i18n":
"builder": "@angular-devkit/build-angular:extract-i18n",
"options":
"browserTarget": "Ang7:build"
,
"test":
"builder": "@angular-devkit/build-angular:karma",
"options":
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"src/styles.scss"
],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets"
]
,
"lint":
"builder": "@angular-devkit/build-angular:tslint",
"options":
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
,
"Ang7-e2e":
"root": "e2e/",
"projectType": "application",
"prefix": "",
"architect":
"e2e":
"builder": "@angular-devkit/build-angular:protractor",
"options":
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "Ang7:serve"
,
"configurations":
"production":
"devServerTarget": "Ang7:serve:production"
,
"lint":
"builder": "@angular-devkit/build-angular:tslint",
"options":
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
,
"defaultProject": "Ang7",
"cli":
"analytics": "2655066d-910d-4521-b978-37a981395ab1"
manifest.json
"gcmsender_id":"654616556484"
【问题讨论】：
【参考方案1】：您好像错过了将其添加到angular.json 文件中。
确保您的 angular.json 结构包含 manifest.json 文件。
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects":
"project-name":
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect":
"build":
"builder": "@angular-devkit/build-angular:browser",
"options":
...
"assets": [
"src/assets",
"src/favicon.ico",
"manifest.json" // <-- Must be included
],
...
【讨论】：
我已经在 angular.json 上添加了它，它位于 src/manifest.json 目录中，但它似乎不起作用。由于错误不会消失 你能分享你的angular.json和manifest.json文件吗？
请看我上面分享的内容【参考方案2】：
将 src/manifest.json 添加到 angular.json 中的 assets 数组中
"assets": ["src/assets", "src/favicon.ico", "src/manifest.json"],
重启你的服务器
【讨论】：
以上是关于在 index.html 上添加清单 Json的主要内容，如果未能解决你的问题，请参考以下文章