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

Question

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

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

当我运行 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"
                  }
                }

这是我的 SRC

Answer 1

我首先删除了所有与favicon.ico 相关的内容，这意味着将其从index.html 和angular.js 中删除 然后按照以下步骤操作：

• 运行：npm install --save express path
• 更改为package.json

    "scripts": {
        ...
        "start": "node server.js",
        "postinstall": "ng build --prod"
      },
      "engines": {
        "node": "8.11.3",
        "npm": "6.1.0"
      },

• 您可以使用node --version & npm --version 了解版本。
• 将 @angular/cli、@angular/compiler-cli、typescripty "@angular-devkit/build-angular": "~0.6.8"__ __ * 从 devDependencies 移动到 dependencias。
• 在根文件夹中使用以下信息创建 server.js：

    const path = require('path');
    const express = require('express');
    const app = express();
    // Serve static files
    app.use(express.static(__dirname + '/dist/MY_APP_NAME'));
    // Send all requests to index.html
    app.get('/*', function(req, res) {
      res.sendFile(path.join(__dirname + '/dist/MY_APP_NAME/index.html'));
    });
    // default Heroku port
    app.listen(process.env.PORT || 5000);

将 MY_APP_NAME 替换为您的应用名称。

• 在 Heroku 网页中创建一个应用程序并按照 Heroku 部署说明进行操作。

参考文献

• https://medium.com/@roliver_javier/como-desplegar-tu-aplicacion-de-angular-en-heroku-7b9941b6d39
• https://dev.to/gedgonz/haciendo-deploy-de-una-app-en-angular-a-heroku-16ji

Answer 2

对您的 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);
   

希望这会有所帮助。