CODEWITHSUNDEEP
node.jsangularheroku
Jame H
Jame H

Reputation: 1384

Deploy to heroku angular 4

I'm trying to deploy Angular 4 shop app to heroku.

But It's not work.

Here is my package.json:

{
  "name": "angular-simple-shopping-cart",
  "version": "1.0.0",
  "license": "MIT",
  "main": "app.js",
  "engines": {
    "node": ">= 8.5.0",
    "npm": ">= 5.3.0"
  },
  "scripts": {
    "build": "ng build -prod -aot && gulp",
    "start": "ng serve",
    "start:https": "ng serve --ssl true --ssl-key ./dev_cert.key --ssl-cert ./dev_cert.crt",
    "test": "ng test --watch false",
    "e2e": "ng e2e",
    "preinstall": "npm install @angular/compiler-cli --save && npm install --save @angular/cli@latest",
    "postinstall": "ng build"
  },
  "private": true,
  "dependencies": {
    "@angular/cli": "^1.4.5",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/compiler-cli": "^4.4.4",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.1.2",
    "core-js": "^2.4.1",
    "express": "^4.15.4",
    "intl": "^1.2.5",
    "node-sass": "^4.5.2",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "@types/sinon": "^2.2.1",
    "codelyzer": "~2.0.0",
    "gulp": "^3.9.1",
    "gulp-htmlmin": "^3.0.0",
    "gulp-replace": "^0.5.4",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.0",
    "sinon": "^2.2.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.2.0"
  }
}

My Procfile:

web: node app.js

I can run node app.js and my web run well on local.

But after I deploy to heroku, I meet this error:

Counting objects: 105, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (101/101), done.
Writing objects: 100% (105/105), 382.45 KiB | 5.54 MiB/s, done.
Total 105 (delta 22), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Node.js app detected
remote:
remote: -----> Creating runtime environment
remote:
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NPM_CONFIG_PRODUCTION=true
remote:        NODE_VERBOSE=false
remote:        NODE_ENV=production
remote:        NODE_MODULES_CACHE=true
remote:
remote: -----> Installing binaries
remote:        engines.node (package.json):  >= 8.5.0
remote:        engines.npm (package.json):   >= 5.3.0
remote:
remote:        Resolving node version >= 8.5.0...
remote:        Downloading and installing node 8.6.0...
remote:        Bootstrapping npm >= 5.3.0 (replacing 5.3.0)...
remote:        npm 5.4.2 installed
remote:
remote: -----> Restoring cache
remote:        Skipping cache restore (not-found)
remote:
remote: -----> Building dependencies
remote:        Installing node modules (package.json + package-lock)
remote:
remote:        > [email protected] preinstall /tmp/build_bcf770b36cce98e184bb462a78de0819
remote:        > npm install @angular/compiler-cli --save && npm install --save @angular/cli@latest
remote:
remote:
remote:        > [email protected] install /tmp/build_bcf770b36cce98e184bb462a78de0819/node_modules/@angular/cli/node_modules/node-sass
remote:        > node scripts/install.js
remote:
remote:        Downloading binary from https://github.com/sass/node-sass/releases/download/v4.5.3/linux-x64-57_binding.node
remote:        Download complete
remote:        Binary saved to /tmp/build_bcf770b36cce98e184bb462a78de0819/node_modules/@angular/cli/node_modules/node-sass/vendor/linux-x64-57/binding.node
remote:        Caching binary to /app/.npm/node-sass/4.5.3/linux-x64-57_binding.node
remote:
remote:        > [email protected] postinstall /tmp/build_bcf770b36cce98e184bb462a78de0819/node_modules/uglifyjs-webpack-plugin
remote:        > node lib/post_install.js
remote:
remote:
remote:        > [email protected] postinstall /tmp/build_bcf770b36cce98e184bb462a78de0819/node_modules/@angular/cli/node_modules/node-sass
remote:        > node scripts/build.js
remote:
remote:        Binary found at /tmp/build_bcf770b36cce98e184bb462a78de0819/node_modules/@angular/cli/node_modules/node-sass/vendor/linux-x64-57/binding.node
remote:        Testing binary
remote:        Binary is fine
remote:        + @angular/[email protected]
remote:        added 792 packages in 17.707s
remote:        + @angular/[email protected]
remote:        added 114 packages and updated 2 packages in 13.899s
remote:
remote:        > [email protected] install /tmp/build_bcf770b36cce98e184bb462a78de0819/node_modules/node-sass
remote:        > node scripts/install.js
remote:
remote:        Cached binary found at /app/.npm/node-sass/4.5.3/linux-x64-57_binding.node
remote:
remote:        > [email protected] postinstall /tmp/build_bcf770b36cce98e184bb462a78de0819/node_modules/node-sass
remote:        > node scripts/build.js
remote:
remote:        Binary found at /tmp/build_bcf770b36cce98e184bb462a78de0819/node_modules/node-sass/vendor/linux-x64-57/binding.node
remote:        Testing binary
remote:        Binary is fine
remote:
remote:        > [email protected] postinstall /tmp/build_bcf770b36cce98e184bb462a78de0819
remote:        > ng build
remote:
remote:        Versions of @angular/compiler-cli and typescript could not be determined.
remote:        The most common reason for this is a broken npm install.
remote:
remote:        Please make sure your package.json contains both @angular/compiler-cli and typescript in
remote:        devDependencies, then delete node_modules and package-lock.json (if you have one) and
remote:        run npm install again.
remote:        npm ERR! code ELIFECYCLE
remote:        npm ERR! errno 2
remote:        npm ERR! [email protected] postinstall: `ng build`
remote:        npm ERR! Exit status 2
remote:        npm ERR!
remote:        npm ERR! Failed at the [email protected] postinstall script.
remote:        npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote:
remote:        npm ERR! A complete log of this run can be found in:
remote:        npm ERR!     /app/.npm/_logs/2017-10-09T09_45_47_273Z-debug.log
remote:
remote: -----> Build failed
remote:
remote:        We're sorry this build is failing! You can troubleshoot common issues here:
remote:        https://devcenter.heroku.com/articles/troubleshooting-node-deploys
remote:
remote:        Some possible problems:
remote:
remote:        - Dangerous semver range (>) in engines.node
remote:        https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
remote:
remote:        Love,
remote:        Heroku
remote:
remote:  !     Push rejected, failed to compile Node.js app.
remote:
remote:  !     Push failed
remote: Verifying deploy...
remote:
remote: !       Push rejected to phuongshop86.
remote:
To https://git.heroku.com/phuongshop86.git
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/phuongshop86.git'

Please help me fix this issue. I try many solution from google but it's not work.

Thanks & Best Regards,

Jame

Upvotes: 1

Views: 819

Answers (2)

Sigu Magwa
Sigu Magwa

Reputation: 568

As explained earlier above by omeralper, by default, heroku does not install dev dependencies. There are two ways to get around this as detailed in the heroku nodejs documentation here

  1. Add the dependencies needed for from the devDependencies into dependencies

  2. add an environment variable to heroku that will enable all the dev dependencies to be installed.

    $ heroku config:set NPM_CONFIG_PRODUCTION=false

Heroku however prefers you to use the first method as we might not want all the development dependencies to be installed

Upvotes: 0

omeralper
omeralper

Reputation: 10124

By default, Heroku only install the packages listed in the dependencies object and will ignore those in devDependencies. Write typescript to dependencies part and you don't need preinstall script.

Upvotes: 3

Related Questions