json - Angular 项目未显示为 Chrome 扩展程序
问题描述
我正在关注如何将 Angular 项目创建为 chrome 扩展的教程。这是链接:https ://medium.com/angular-in-depth/chrome-extension-with-angular-why-and-how-778200b87575
我不确定我错过了什么,但是当我尝试在 Chrome 中查看页面时,我只看到一个白色的小方块。像这样:
该项目甚至没有加载。在与文章一起发布的视频中,演示者提到添加“aot”:true、运行 ng build 并刷新扩展以解决问题,但我仍然看不到您在创建新项目时看到的默认 Angular 页面. 我对我缺少的东西感到困惑,我还需要添加到 angular.json 文件中吗?
*如果需要其他文件的代码,请告诉我,我之前从未创建过扩展,所以我不确定需要哪些文件来帮助解决这个问题。
这是我的清单文件如下:
{
"name": "Great Extension",
"version": "1.0",
"description": "Build an Extension with Angular",
"manifest_version": 2,
"browser_action": {
"default_popup": "index.html"
}
}
这是我的 angular.json 文件:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"great-extension": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
},
"@schematics/angular:application": {
"strict": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/great-extension",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"aot":true,
"assets": [
"src/favicon.ico",
"src/assets",
"src/manifest.json"
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "great-extension:build:production"
},
"development": {
"browserTarget": "great-extension:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "great-extension:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
}
}
}
},
"defaultProject": "great-extension"
}
解决方案
推荐阅读
- python - ValueError:输入X在python中必须为非负数
- android - 导出通过 react-native 开发的前端 apk 和由 Fire base 和 Node.js 组成的后端?
- spring - 如何将字节数组流式传输到 UI 并在 Spring Boot 中异步下载
- python - 未创建媒体文件夹
- mysql - 为什么给定的查询会给出意外的输出?
- javascript - 如何发送带有特定数据的预定电子邮件,而不必在反应组件中呈现它?
- java - 找不到适合 jdbc:mariadb://127.0.0.1:3306/mydb?user=root 的驱动程序
- python - Numpy:np.repeat 和 np.broadcast_to 之间的区别
- javascript - React 钩子状态对于几个相等的事件有不同的值
- mapbox-gl-js - 簇几何与原始几何不同(有偏移,但为什么?)