Deploying angular 2 App (angular cli) to heroku

Question

I built and angular 2 app with angular cli ng build command works totally fine, it creates the dist folder.

In order to deploy it I followed this tutorial Deploy angular 2 app to heroku

When I follow all the steps, I type heroku open but I get an app error

ng: not found

log

here is my package.json file if you want to see it

It seems that is problem of angular-cli and his command ng but here in my package.json i have it

`{
  "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"
  }
}
`

One more thing, when I'm deploying I see installing components like @angular/common ... but no all of them.

any suggestion would be appreciated.

Answer 1

looks like your heroku app instance does not have angular-cli installed. I found a way to get it installed.

In your package JSON, add preinstall command like this

"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/* ."
  },

This will get angular-cli installed on heroku server and you will not get ng command not found related errors.

Answer 2

我的问题是我在另一个分支机构工作，而heroku只是在主分支机构取得了进展

Answer 3

While "git push heroku master" is going on, heroku runs the package.json file. By default, however, Heroku will only install the packages listed in the dependencies object and will ignore those in devDependencies. Since we want the application build step to take place on the server rather than on our local machine, we need to adjust the package.json file a bit.

Angular CLI apps put the @angular/cli module itself as a dev dependency, meaning that we won't be able to access any ng commands on the server. To get around this, we need to move it to dependencies.

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