CODEWITHSUNDEEP
node.jsherokuangularweb-deploymentangular-cli
Rodrigo Espinel
Rodrigo Espinel

Reputation: 99

Deploying angular 2 App (angular cli) to heroku

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

enter image description here

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.

Upvotes: 8

Views: 6779

Answers (3)

Sarthak Srivastav
Sarthak Srivastav

Reputation: 144

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

Upvotes: 0

abhiesingh
abhiesingh

Reputation: 71

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.

Upvotes: 7

Rodrigo Espinel
Rodrigo Espinel

Reputation: 99

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

Upvotes: -6

Related Questions