无法在Heroku上部署MEAN堆栈

时间:2018-01-26 18:03:08

标签: angular heroku mean

在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'文件包含Port的配置和Node.JS Configuration的其他细节。

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

1 个答案:

答案 0 :(得分:0)

当您部署到Heroku时,它只会安装您在package.json的dependencies部分中列出的软件包。这意味着将不会安装devDependencies中的任何软件包。其他托管服务也是如此。 devDependencies仅用于开发,但Heroku被认为是生产(NODE_ENV =生产)。

您需要做的是确保生产中所需的依赖项放在依赖项中。在你的情况下,它抱怨 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"

应该是&#34; postinstall&#34;。