Heroku 似乎在构建客户端，但我没有看到 dist 文件夹

Question

将我的 angular/node 应用程序推送到 heroku 时，当我查看日志时，它似乎构建成功。但我可以看到没有在角度侧创建 dist 文件夹。

我在本地构建了 Angular 客户端，以确保代码中没有错误。

我已将构建脚本从 - "postinstall": "ng build --prod"

正在抛出“找不到 environment.prod.ts 的路径”错误

"heroku-postbuild": "ng build --configuration=production"

不会引发错误但不会继续创建 dist 文件夹。所以我有点卡住了。

角度包.json

{
  "name": "client",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "node app.js",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "heroku-postbuild": "ng build --configuration=production"
  },
  "private": true,
  "dependencies": {
    "@angular/cli": "~7.3.1",
    "@angular/compiler-cli": "~7.2.0",
    "typescript": "~3.2.2",
    "@angular/animations": "^7.2.8",
    "@angular/cdk": "^7.3.3",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/flex-layout": "^7.0.0-beta.24",
    "@angular/forms": "~7.2.0",
    "@angular/material": "^7.3.3",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "@vguleaev/angular-material-autocomplete": "0.0.10",
    "@w11k/ngx-componentdestroyed": "^4.1.4",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "rxjs-observable-store": "^1.0.1",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.13.9",
    "@angular/language-service": "~7.2.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0"
  },
  "engines": {
    "node": "10.0.0",
    "npm": "5.6.0"
  }
}

节点包.json

{
  "name": "spotify-alias",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "engines": {
    "node": "10.0.0",
    "npm": "5.6.0"
  },
  "dependencies": {
    "@babel/cli": "^7.5.5",
    "@babel/core": "^7.5.5",
    "@babel/node": "^7.5.0",
    "@babel/preset-env": "^7.5.0",
    "axios": "^0.19.0",
    "concurrently": "^4.1.0",
    "cookie-session": "^1.3.3",
    "cors": "^2.8.5",
    "express": "^4.16.4",
    "mongoose": "^5.4.14",
    "node-fetch": "^2.3.0",
    "passport": "^0.4.0",
    "passport-spotify": "^1.0.1"
  },
  "devDependencies": {
    "nodemon": "^1.19.1"
  },
  "scripts": {
    "start": "node app.js",
    "server": "nodemon --exec babel-node app.js",
    "client": "npm start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false && npm install --prefix client"
  },
  "author": "",
  "license": "ISC"
}

app.js - 节点

if(process.env.NODE_ENV === 'production') {
    app.use(express.static('/client/dist/index.html'));

    const path = require('path');
    app.get('*', (req, res) => {
        res.sendFile(path.resolve(__dirname, "client", "dist", "index.html"));
    });
}

我想要构建所有内容并创建 dist 文件夹。这是我的第一个节点应用程序，所以请多多包涵，可能有些事情看起来完全不对。

就像我不能 100% 确定解析路径的 app.js 代码一样。我确实知道 /client 是 Angular 内容的来源。

非常感谢任何帮助。

Answer 1

您没有构建脚本。我看到你正在使用 Babel。因此，您需要告诉 Babel 为您运行构建；它最终提供了 dist 文件夹（尽管可以是任何名称）。

"build": "babel src --out-dir dist --copy-files",

Answer 2

请按照博客在 heroku 上部署 Angular 应用程序

https://medium.com/@hellotunmbi/how-to-deploy-angular-application-to-heroku-1d56e09c5147