无法在 Heroku 上部署 MEAN 堆栈

Question

在 Heroku 上部署 MEAN 应用时出现错误，请查看以下日志：

Could not find local "typescript" package.The "@ngtools/webpack" package requires a local "typescript@^2.0.2" package to be installed.Error: Cannot find module 'typescript'
Error: Could not find local "typescript" package.The "@ngtools/webpack" package requires a local "typescript@^2.0.2" package to be installed.Error: Cannot find module 'typescript'
    at Object.<anonymous> (/app/node_modules/@ngtools/webpack/src/index.js:18:11)
    at Module._compile (module.js:624:30)
    at Object.Module._extensions..js (module.js:635:10)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)
    at Function.Module._load (module.js:500:3)
    at Module.require (module.js:568:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/app/node_modules/@angular/cli/models/webpack-config.js:3:19)
    at Module._compile (module.js:624:30)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! todoapp-angular@0.0.0 start: `ng serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the todoapp-angular@0.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

这是Procfile

web: node ./bin/www

这是 package.json 文件

{
  "name": "todoapp-angular",
  "version": "0.0.0",
  "private": true,
  "license": "MIT",
  "main": "./bin/www",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postnstall": "ng build --aot --prod"
  },
  "engines": {
    "node": "~8.5.0",
    "npm": "~5.3.0"
  },
  "dependencies": {
    "@angular/cli": "1.6.5",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.9",
    "bluebird": "^3.5.1",
    "bootstrap": "^4.0.0-beta",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "mongoose": "^5.0.1",
    "mongoose-paginate": "^5.0.3",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "1.6.5",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "bluebird": "^3.5.1",
    "body-parser": "~1.18.2",
    "codelyzer": "^4.0.1",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.9",
    "ejs": "~2.5.7",
    "express": "^4.16.2",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "mongoose": "^4.13.9",
    "mongoose-paginate": "^5.0.3",
    "morgan": "~1.9.0",
    "nodemon": "^1.14.11",
    "protractor": "~5.1.2",
    "serve-favicon": "~2.4.5",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }
}

我在 Procfile 中指定的“www”文件包含端口配置和 Node.JS 配置的其他详细信息。

注意：我正在尝试一种方法来部署我的 Angular 应用程序。如果有更好的方法可以改进我的应用程序的架构，请与我分享这个想法（链接会很棒）。
我希望服务器和客户端都在同一台服务器上。

Answer 1

当您部署到 Heroku 时，它只会安装您在 package.json 的依赖项部分中列出的包。这意味着不会安装 devDependencies 中的任何包。其他托管服务也是如此。 devDependencies 仅用于开发，但 Heroku 被认为是生产（NODE_ENV=production）。

您要做的是确保将生产中所需的依赖项放在依赖项中。在您的情况下，它抱怨 typescript，但可能还有更多。您可以通过删除开发环境中的 node_modules 文件夹轻松检查所需内容，然后运行 ​​npm install --production。像 Heroku 一样启动服务器，并在启动期间查找错误消息。将错误消息抱怨的包一一移动到依赖项中，直到它开始工作。我建议使用npm uninstall --save xxx 移动它们，然后使用npm install --save xxx 以确保它在 package.json 和 package-lock.json 中都正确完成。

考虑到您在部署时在 Heroku 上构建 Angular 文件（这很正常），您可能需要依赖项中的所有包。

ng serve 用于启动开发服务器。它不应该在生产中使用。 Heroku 尝试从我从您的错误消息中看到的内容启动它。您可能希望使用 Node http 或 Express 服务器托管前端。

最后，你这里有一个错字：

"postnstall": "ng build --aot --prod"

应该是“安装后”。