Why is my Heroku build failing?

my heroku build is failing. I am trying to build an Angular 4 application on Heroku but it won't let me. I have a feeling it is missing a package.json dependency but I am not sure.

-----> Node.js app detected
-----> Creating runtime environment
       
       NPM_CONFIG_LOGLEVEL=error
       NPM_CONFIG_PRODUCTION=true
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true
-----> Installing binaries
       engines.node (package.json):  unspecified
       engines.npm (package.json):   unspecified (use default)
       
       Resolving node version 8.x...
       Downloading and installing node 8.9.3...
       Using default npm version: 5.5.1
-----> Restoring cache
       Skipping cache restore (not-found)
-----> Building dependencies
       Installing node modules (package.json + package-lock)
       
       > [email protected] preinstall /tmp/build_245bb93639fea477473780ef82795ada/SPA-Front-End-d028559f87c3e58d7bd2c6da70d4ffb0e3e44add
       > npm install -g http-server
       
       /tmp/build_245bb93639fea477473780ef82795ada/SPA-Front-End-d028559f87c3e58d7bd2c6da70d4ffb0e3e44add/.heroku/node/bin/http-server -> /tmp/build_245bb93639fea477473780ef82795ada/SPA-Front-End-d028559f87c3e58d7bd2c6da70d4ffb0e3e44add/.heroku/node/lib/node_modules/http-server/bin/http-server
       /tmp/build_245bb93639fea477473780ef82795ada/SPA-Front-End-d028559f87c3e58d7bd2c6da70d4ffb0e3e44add/.heroku/node/bin/hs -> /tmp/build_245bb93639fea477473780ef82795ada/SPA-Front-End-d028559f87c3e58d7bd2c6da70d4ffb0e3e44add/.heroku/node/lib/node_modules/http-server/bin/http-server
       + [email protected]
       added 23 packages in 1.212s
       
       > [email protected] preinstall /tmp/build_245bb93639fea477473780ef82795ada/SPA-Front-End-d028559f87c3e58d7bd2c6da70d4ffb0e3e44add/node_modules/node
       > node installArchSpecificPackage
       
       + [email protected]
       added 1 package in 1.676s
       
       > [email protected] postinstall /tmp/build_245bb93639fea477473780ef82795ada/SPA-Front-End-d028559f87c3e58d7bd2c6da70d4ffb0e3e44add
       > ng build --prod
       
       sh: 1: ng: not found
       npm ERR! file sh
       npm ERR! code ELIFECYCLE
       npm ERR! errno ENOENT
       npm ERR! syscall spawn
       npm ERR! [email protected] postinstall: `ng build --prod`
       npm ERR! spawn ENOENT
       npm ERR!
       npm ERR! Failed at the [email protected] postinstall script.
       npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
       
       npm ERR! A complete log of this run can be found in:
       npm ERR!     /app/.npm/_logs/2017-12-13T01_22_28_985Z-debug.log
-----> Build failed
       
       We're sorry this build is failing! You can troubleshoot common issues here:
       https://devcenter.heroku.com/articles/troubleshooting-node-deploys
       
       Some possible problems:
       
       - Node version not specified in package.json
       https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
       
       Love,
       Heroku
       
 !     Push rejected, failed to compile Node.js app.
 !     Push failed

I do not know why it is failing but I really want it to work, any help is appreciated. If you need more specific details, please let me know!

My JSON package:

{
  "name": "n5-complete-guide",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "_heroku": "https://www.angularonrails.com/deploy-rails-application-angular-cli-webpack-front-end/",
    "start": "http-server dist/",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor",
    "preinstall": "npm install -g http-server",
    "postinstall": "ng build --prod"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "express": "^4.16.2",
    "ng": "0.0.0-rc6",
    "node": "^9.2.0",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.5.0",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2"
  }
}

Upvotes: 3

Answers (4)

Mohsin Hasan

Reputation: 156

Move @angular/cli and @angular/compiler-cli from “devDependencies” to “dependencies”. Here is my package.json :

{
  "name": "mean-app",
  "version": "0.0.0",
  "license": "MIT",
  "engines": {
    "node": "6.11.3",
    "npm": "3.10.10"
  },
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "heroku-postbuild": "ng build"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.2.4",
    "@angular/cli": "1.4.9",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "angular2-toaster": "^4.0.1",
    "axios": "^0.17.0",
    "body-parser": "^1.18.2",
    "bootstrap": "^4.0.0-beta.2",
    "core-js": "^2.4.1",
    "cors": "^2.8.4",
    "express": "^4.16.2",
    "jquery": "^3.2.1",
    "mongoose": "^4.12.4",
    "ngx-bootstrap": "^1.9.3",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/language-service": "^4.2.4",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/jquery": "^3.2.15",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.3.3"
  }
}

Upvotes: 1

Gaurav Mukherjee

Reputation: 6335

Beacause @angular/cli is not installed on deployed machine using ng build in script wont work. Do this

"scripts": {
  ...
  "build:prod": "ng build --prod",
  "heroku-postbuild": "npm run build:prod"
},

Things to note. use heroku-postbuild instead of postinstall. And running a npm script which uses local package (ng in this case) works. But directly running ng build --prod in npm script wont run.

Upvotes: 0

Daniel Kucal

Reputation: 9232

It fails because there is no ng command available. It's provided by @angular/cli, if moving it to required dependencies and executing local binary doesn't work, then try to change your preinstall script to:

"preinstall": "npm i -g http-server && npm i -g @angular/cli",

Upvotes: 1

radar155

Reputation: 2220

In postinstall, you are using ng executable supposing it's installed globally. Since ng is also one of your dependencies, you could change it to

"postinstall": "./node_modules/.bin/ng build --prod"

Upvotes: 0

Why is my Heroku build failing?

Answers (4)

Related Questions