部署到heroku angular 4答案

【问题标题】：Deploy to heroku angular 4部署到heroku angular 4
【发布时间】：2018-03-20 11:54:15
【问题描述】：

我正在尝试将 Angular 4 商店应用程序部署到 heroku。

但这行不通。

这是我的 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"
  }
}

我的档案：

web: node app.js

我可以运行 node app.js 并且我的 web 在本地运行良好。

但是在我部署到heroku之后，我遇到了这个错误：

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:        > angular-simple-shopping-cart@1.0.0 preinstall /tmp/build_bcf770b36cce98e184bb462a78de0819
remote:        > npm install @angular/compiler-cli --save && npm install --save @angular/cli@latest
remote:
remote:
remote:        > node-sass@4.5.3 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:        > uglifyjs-webpack-plugin@0.4.6 postinstall /tmp/build_bcf770b36cce98e184bb462a78de0819/node_modules/uglifyjs-webpack-plugin
remote:        > node lib/post_install.js
remote:
remote:
remote:        > node-sass@4.5.3 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/compiler-cli@4.4.4
remote:        added 792 packages in 17.707s
remote:        + @angular/cli@1.4.5
remote:        added 114 packages and updated 2 packages in 13.899s
remote:
remote:        > node-sass@4.5.3 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:        > node-sass@4.5.3 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:        > angular-simple-shopping-cart@1.0.0 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! angular-simple-shopping-cart@1.0.0 postinstall: `ng build`
remote:        npm ERR! Exit status 2
remote:        npm ERR!
remote:        npm ERR! Failed at the angular-simple-shopping-cart@1.0.0 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'

请帮我解决这个问题。我尝试了许多来自谷歌的解决方案，但它不起作用。

感谢和最好的问候，

詹姆斯

【问题讨论】：

默认情况下，Heroku 只安装 dependencies 对象中列出的包，而忽略 devDependencies 中的包。将 typescript 写入依赖项部分，您不需要预安装脚本。
谢谢，可以了
那我把它写成答案

标签： node.js angular heroku

【解决方案1】：

默认情况下，Heroku 只安装 dependencies 对象中列出的包，而忽略 devDependencies 中的包。将 typescript 写入依赖项部分，您不需要预安装脚本。

【讨论】：

【解决方案2】：

正如前面omeralper 所解释的，默认情况下，heroku 不安装开发依赖项。有两种方法可以解决这个问题，详见in the heroku nodejs documentation here

将devDependencies所需的依赖项添加到dependencies
向 heroku 添加一个环境变量，以启用所有开发依赖项的安装。

$ heroku config:set NPM_CONFIG_PRODUCTION=false

Heroku 更喜欢你使用第一种方法，因为我们可能不希望安装所有开发依赖项

【讨论】：