Javascript 获取应用程序错误代码503 favicon angular
这是我第一次在Heroku中部署我的应用程序 我的部署成功了，但我的错误如下 当我运行heroku日志时——tail 我得到了这个错误 我从网上和stackoverlow尝试了最大值，但我还是得到了相同的错误 这是我的package.jsonJavascript 获取应用程序错误代码503 favicon angular,javascript,angular,typescript,heroku,heroku-cli,Javascript,Angular,Typescript,Heroku,Heroku Cli,这是我第一次在Heroku中部署我的应用程序 我的部署成功了，但我的错误如下 当我运行heroku日志时——tail 我得到了这个错误 我从网上和stackoverlow尝试了最大值，但我还是得到了相同的错误 这是我的package.json { "name": "ff-fabric", "version": "1
{
"name": "ff-fabric",
"version": "1.0.1",
"description": "ImagEditor",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve --o",
"build": "ng build",
"dist": "ng build --prod --aot=false",
"test": "ng test",
"eject": "react-scripts eject",
"heroku-postbuild": "npm run build",
"lint": "ng lint",
"e2e": "ng e2e"
},
"engines": {
"node": "14.15.4",
"npm": "7.6.0"
},
"author": "check",
"keywords": [
"kitchensink",
"canvas",
"angular",
"fabricjs",
"editor",
"images",
"fabric"
],
"dependencies": {
"@angular/common": "^11.2.3",
"@angular/compiler": "^11.2.3",
"@angular/core": "^11.2.3",
"@angular/forms": "^11.2.3",
"@angular/http": "^5.0.0",
"@angular/platform-browser": "^11.2.3",
"@angular/platform-browser-dynamic": "^11.2.3",
"@angular/router": "^11.2.3",
"@ng-bootstrap/ng-bootstrap": "^9.0.2",
"@types/fabric": "^4.2.2",
"bootstrap": "^4.6.0",
"core-js": "^3.9.1",
"fabric": "^4.3.1",
"font-awesome": "^4.7.0",
"ng-lazyload-image": "^9.1.0",
"ng2-dnd": "^5.0.2",
"ng2-file-upload": "^1.4.0",
"ng2-nouislider": "^1.8.3",
"ng2-pagination": "^2.0.2",
"ng2-toastr": "^4.1.2",
"ngx-color-picker": "^11.0.0",
"ngx-font-picker": "^11.0.1",
"nouislider": "^14.6.3",
"rxjs": "^6.6.6",
"serve": "^11.3.2",
"serve-favicon": "^2.5.0",
"zone.js": "^0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.1102.2",
"@angular/cli": "11.2.2",
"@angular/compiler-cli": "^11.2.3",
"@types/jasmine": "3.6.4",
"@types/node": "~14.14.31",
"codelyzer": "~6.0.1",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~6.0.0",
"karma": "~6.1.1",
"karma-chrome-launcher": "~3.1.0",
"karma-cli": "~2.0.0",
"karma-coverage-istanbul-reporter": "^3.0.3",
"karma-jasmine": "~4.0.1",
"karma-jasmine-html-reporter": "^1.5.4",
"protractor": "~7.0.0",
"ts-node": "~9.1.1",
"tslint": "~5.20.1",
"typescript": "~4.0.0"
}
}
"start": "node server.js"
"heroku-postbuild": "ng build --prod"
对您的package.json进行一些配置更改应该可以让它正常工作
"@angular/cli": "11.2.2",
"@angular/compiler-cli": "^11.2.3"
{
"name": "ff-fabric",
"version": "1.0.1",
"description": "ImagEditor",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve --o",
"build": "ng build",
"dist": "ng build --prod --aot=false",
"test": "ng test",
"eject": "react-scripts eject",
"heroku-postbuild": "npm run build",
"lint": "ng lint",
"e2e": "ng e2e"
},
"engines": {
"node": "14.15.4",
"npm": "7.6.0"
},
"author": "check",
"keywords": [
"kitchensink",
"canvas",
"angular",
"fabricjs",
"editor",
"images",
"fabric"
],
"dependencies": {
"@angular/common": "^11.2.3",
"@angular/compiler": "^11.2.3",
"@angular/core": "^11.2.3",
"@angular/forms": "^11.2.3",
"@angular/http": "^5.0.0",
"@angular/platform-browser": "^11.2.3",
"@angular/platform-browser-dynamic": "^11.2.3",
"@angular/router": "^11.2.3",
"@ng-bootstrap/ng-bootstrap": "^9.0.2",
"@types/fabric": "^4.2.2",
"bootstrap": "^4.6.0",
"core-js": "^3.9.1",
"fabric": "^4.3.1",
"font-awesome": "^4.7.0",
"ng-lazyload-image": "^9.1.0",
"ng2-dnd": "^5.0.2",
"ng2-file-upload": "^1.4.0",
"ng2-nouislider": "^1.8.3",
"ng2-pagination": "^2.0.2",
"ng2-toastr": "^4.1.2",
"ngx-color-picker": "^11.0.0",
"ngx-font-picker": "^11.0.1",
"nouislider": "^14.6.3",
"rxjs": "^6.6.6",
"serve": "^11.3.2",
"serve-favicon": "^2.5.0",
"zone.js": "^0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.1102.2",
"@angular/cli": "11.2.2",
"@angular/compiler-cli": "^11.2.3",
"@types/jasmine": "3.6.4",
"@types/node": "~14.14.31",
"codelyzer": "~6.0.1",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~6.0.0",
"karma": "~6.1.1",
"karma-chrome-launcher": "~3.1.0",
"karma-cli": "~2.0.0",
"karma-coverage-istanbul-reporter": "^3.0.3",
"karma-jasmine": "~4.0.1",
"karma-jasmine-html-reporter": "^1.5.4",
"protractor": "~7.0.0",
"ts-node": "~9.1.1",
"tslint": "~5.20.1",
"typescript": "~4.0.0"
}
}
"start": "node server.js"
"heroku-postbuild": "ng build --prod"
npm install express path --save
//Install express server
const express = require('express');
const path = require('path');
const app = express();
// Serve only the static files form the dist directory
app.use(express.static(__dirname + '/dist/<name-of-app>'));
app.get('/*', function(req,res) {
res.sendFile(path.join(__dirname+'/dist/<name-of-app>/index.html'));
});
// Start the app by listening on the default Heroku port
app.listen(process.env.PORT || 8080);
//安装express server
const express=require（'express'）；
const path=require（'path'）；
常量app=express（）；
//仅为dist目录中的静态文件提供服务
应用程序使用（express.static（uu dirname+'/dist/'）；
app.get（'/*'，函数（req，res）{
res.sendFile（path.join（uu dirname+'/dist//index.html'）；
});
//通过监听默认Heroku端口启动应用程序
app.listen（process.env.PORT | | 8080）；
希望这能有所帮助。您是否正在硬设置要使用的端口？没有，没有任何配置file@ZamAbdulVahid我已附上我的结构屏幕照片，非常感谢worked@Mr.M很高兴它开始给你指引方向。需要解决的剩余问题是什么？我在部署中遇到了一些类似的问题，例如此属性“selectedSize”是私有的，只能在类“EditorComponent”中访问。110这是一个打字错误，与Heroku无关。在类“EditorComponent”中，您将属性设置为“private selectedSize”。因此不允许在模板中使用。两个选项a）从属性selectedSize中删除关键字“private”b）如果不想在模板中直接公开“selectedSize”，请将其分配给其他属性。假设userSelectedSize=selectedSize；并在html模板中使用userSelectedSize，[（ngModel）]=“userSelectedSize”当然我正在尝试：）