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.

it seems for some reason angular cli was not installed in server. — Eddie Martinez
– Eddie Martinez, Commented Oct 11, 2016 at 20:18

abhiesingh · Accepted Answer · 2017-05-10 02:15:13Z

7

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.

answered May 10, 2017 at 2:15

abhiesingh

711 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sarthak Srivastav · Accepted Answer · 2019-05-14 19:36:13Z

0

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

answered May 14, 2019 at 19:36

Sarthak Srivastav

1442 silver badges10 bronze badges

1 Comment

Suyog Over a year ago

This won't work. Other dependencies such as "@angular-devkit/build-angular" are also required. The best way is to add a pre-install command as answered by @abhiesingh.

Rodrigo Espinel · Accepted Answer · 2016-10-20 20:31:36Z

-6

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

answered Oct 20, 2016 at 20:31

Rodrigo Espinel

991 silver badge3 bronze badges

1 Comment

Janos Vinceller Over a year ago

Hi @Rodrigo Espinel, maybe you're right in using the wrong branch, but all those downvotes show that this answer is wrong. Maybe your other branch is defining something that makes it work (like the solution from @abhiesingh). Would you please remove your answer, not to confuse users having the same problem?

Collectives™ on Stack Overflow

Deploying angular 2 App (angular cli) to heroku

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related