Deploying angular 2 App (angular cli) to heroku - node.js

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

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",
},

Answer 3

My problem was that I was working in another branch and heroku only was taking the progress made in the master branch