获取应用程序错误代码 503 favicon angular

编程问答 2022-05-22

问题描述

这是我第一次在 Heroku 中部署我的应用程序。

我的部署成功了，但出现如下错误。

enter image description here

当我运行 heroku logs --tail

我收到此错误

我从在线和 stackoverlow 中尝试了最大值，但仍然出现相同的错误

这是我的 package.json

                    {
                  "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"
                  }
                }

enter image description here

这是我的 SRC

enter image description here

解决方法

对 package.json 进行少量配置更改即可使其正常工作。

  1. 将 angular cli 从 devDependencies 移动到依赖项。这是因为默认情况下，Heroku 只会安装依赖项对象中列出的包，而会忽略 devDependencies 中的包。由于我们希望应用程序构建步骤在服务器上而不是在我们的本地机器上进行，因此服务器上的 ng 命令将无法访问，因为它被 Angular 应用程序称为开发依赖项。

    "@angular/cli": "11.2.2","@angular/compiler-cli": "^11.2.3"

  2. 在 package.json 的脚本部分

     "start": "node server.js"
 "heroku-postbuild": "ng build --prod"

  3. 通过在终端中运行以下命令来安装 express 服务器

    npm install express path --save

  4. 在应用程序的根目录中创建一个“server.js”文件，以从创建的“dist”文件夹中为应用程序提供服务。

      //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);

希望这会有所帮助。

angularangularherokuherokuherokuheroku-clijavascripttypescripttypescripttypescript