将 Angular 2 应用程序（使用 Angular CLI）部署到 Heroku

Question

我使用angular cli构建了一个angular 2应用程序，ng build命令完全正常，它创建了dist文件夹。

为了部署它，我按照这个教程操作：将angular 2应用程序部署到heroku

当我按照所有步骤操作后，我输入heroku open，但是出现了应用程序错误

ng: not found

日志

如果您想查看它，这是我的package.json文件

似乎是angular-cli和他的命令ng的问题，但在我的package.json中我已经有了它

`{
  "name": "rusticstock",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "http-server",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor",
    "preinstall": "npm install -g http-server",
    "postinstall": "ng build && mv dist/* ."
  },
  "private": true,
  "dependencies": {
    "angular-cli": "1.0.0-beta.16",
    "@angular/common": "2.0.2",
    "@angular/compiler": "2.0.2",
    "@angular/core": "2.0.2",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.2",
    "@angular/platform-browser-dynamic": "2.0.2",
    "@angular/router": "3.0.0",
    "core-js": "^2.4.1",
    "bootstrap": "^3.3.6",
    "ng2-bs3-modal": "^0.10.4",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.6.23",
    "@types/jasmine": "^2.2.30",`enter code here`
    "codelyzer": "~0.0.26",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.9",
    "ts-node": "1.2.1",
    "tslint": "3.13.0",
    "typescript": "2.0.2"
  },
  "devDependencies": {
  },
  "engines": {
    "node": "6.6.0",
    "npm": "3.10.3"
  }
}
`

还有一件事，在我部署时，我看到安装组件，例如@angular/common ...但不是全部。

任何建议都将不胜感激。

- Rodrigo Espinel

---

似乎由于某种原因，Angular CLI未安装在服务器上。 - Eduardo Dennis

我不明白为什么！！如果我在我的package.json中有它 - Rodrigo Espinel

Answer 1

看起来你的Heroku应用程序实例没有安装Angular CLI。

我找到了一种方法来安装它。

在您的package JSON文件中，添加如下preinstall命令：

"scripts": {
    "start": "http-server",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor",
    "preinstall": "npm install -g angular-cli",
    "postinstall": "ng build && mv dist/* ."
  },

这将在Heroku服务器上安装angular-cli，您将不会遇到“ng命令未找到”的相关错误。

- abhiesingh

Answer 2

在执行 "git push heroku master" 命令时，Heroku 会运行 package.json 文件。默认情况下，Heroku 只会安装 dependencies 对象中列出的包，而会忽略 devDependencies 中的包。由于我们希望应用程序的构建步骤在服务器上进行，而不是在本地机器上进行，因此需要稍微调整一下 package.json 文件。

Angular CLI 应用程序将 @angular/cli 模块本身作为 dev 依赖项，这意味着我们无法在服务器上访问任何 ng 命令。为了解决这个问题，我们需要将其移动到 dependencies 中。

 // package.json
 "dependencies": {
 // ...
   "@angular/cli": "7.3.9",
 },

- Sarthak Srivastav

---

这样是行不通的。还需要其他依赖项，例如“@angular-devkit/build-angular”。最好的方法是添加一个预安装命令，就像@abhiesingh回答的那样。 - Suyog

Answer 3

我的问题是我在另一个分支上工作，而Heroku只接受主分支中的进展。

- Rodrigo Espinel

---

嗨@Rodrigo Espinel，也许你在使用错误的分支上是正确的，但所有这些反对票表明这个答案是错误的。也许你的其他分支定义了一些使它工作的东西（就像@abhiesingh的解决方案）。你能否删除你的答案，以免混淆遇到相同问题的用户？ - Janos Vinceller