I have an Angular 5 App.
This is what I have in my package.json
{
"name": "web",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "node server.js",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"postinstall": "ng build --aot --prod"
},
"private": true,
"dependencies": {
"@angular/animations": "5.1.0",
"@angular/cli": "^1.6.4",
"@angular/common": "5.0.3",
"@angular/compiler": "5.0.3",
"@angular/compiler-cli": "5.0.3",
"@angular/core": "5.0.3",
"@angular/forms": "5.0.3",
"@angular/http": "5.0.3",
"@angular/platform-browser": "5.0.3",
"@angular/platform-browser-dynamic": "5.0.3",
"@angular/router": "5.0.3",
"@ng-bootstrap/ng-bootstrap": "1.0.0-beta.5",
"@ngx-translate/core": "8.0.0",
"@types/jquery": "3.2.16",
"angular2-image-upload": "^1.0.0-rc.0",
"bootstrap": "4.0.0-beta.2",
"core-js": "2.4.1",
"express": "^4.16.2",
"jquery": "3.2.1",
"jquery-slimscroll": "1.3.8",
"ngx-toastr": "8.0.0",
"ngx-uploader": "4.2.1",
"pace-js": "1.0.2",
"popper.js": "1.13.0",
"rxjs": "5.5.0",
"sticky-kit": "1.1.3",
"typescript": "~2.4.2",
"zone.js": "0.8.4"
},
"devDependencies": {
"@angular/language-service": "5.0.3",
"@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"
},
"engines": {
"node": "8.9.4",
"npm": "5.6.0"
}
}
I created a server.js with these contents in it.
constexpress=require('express');
constapp=expres();
constpath=require('path');
app.us(express.static(__dirname+'/dist'));
app.listen(process.env.PORT||8080);
//PathLocationStradegy
app.get('/'function(req,res) {
res.sendFile(path.join(__dirname+'/dist/index.html'));
});
console.log('Console Listening');
Then, I run these commands
heroku auth:login
Email : johndoe@outlook.com
Password : #########
heroku create iproject-demo
heroku git:remote iproject-demo
git status
git add -A
git push heroku master
Debug
I tried running this
⚡️ web heroku ps
Free dyno hours quota remaining this month: 998h 46m (99%)
For more information on dyno sleeping and how to upgrade, see:
https://devcenter.heroku.com/articles/dyno-sleeping
=== web (Free): npm start (1)
web.1: crashed 2018/01/27 14:18:58 -0500 (~ 1m ago)
Result
everything looks good.
Heroku Log show Build Success.
-----> 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.4...
Using default npm version: 5.6.0
-----> Restoring cache
Skipping cache restore (not-found)
-----> Building dependencies
Installing node modules (package.json)
added 26 packages in 5.46s
-----> Caching build
Clearing previous node cache
Saving 2 cacheDirectories (default):
- node_modules
- bower_components (nothing to cache)
-----> Build succeeded!
-----> Discovering process types
Procfile declares types -> (none)
Default types for buildpack -> web
-----> Compressing...
Done: 34.4M
-----> Launching...
Released v3
https://iproject-demo.herokuapp.com/ deployed to Heroku
But when I go to the app:
https://iproject-demo.herokuapp.com/
I see this
How can I debug this further?
Here's how I make my Angular app to deploy and work on Heroku:
- Your
server.jsshould look something like this: https://hastebin.com/zavehahide.js - In your
package.json, move@angular/cliand@angular/compiler-clifromdevDependenciestodependencies - Also in your
package.json, addpostinstall: ng build --prodandstart: node server.jstoscripts
You should be good to go.
Usually when this error happens to me I have problems with node dependencies. Try to remove the node_modules folder, and the dist folder. From there spin everything up again, this mimics how heroku will build your project.
I suggest for more simplicity, if you want to deploy the backend on heroku as api and the he front end on github and activate cross origin resource sharing on browsing computer, I am actually building such app, that is my plan otherwise if you get any good news of this way your are doing update me
In your server.js you need to redirect your http call to the index.
app.route('/*', function(req,res) {
res.redirect(__dirname + '/dist/index.html')
})
In the above it'll redirect any call to your index.html.
Correct your code in Server.js
const express = require('express');
const app = express();
const path = require('path');
app.use(express.static(__dirname+'/dist'));
app.listen(process.env.PORT||8080);
//Path Location Strategy
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname+'/dist/index.html'));
});
console.log('Console Listening');
For future reference -
try running logs command before hitting the URL.
$ heroku logs
Then check the logs for further details.
You will face memory exceed issue if you are gonna build prod on heroku. So free type won’t work.
So try to build in local and serve your dist files using express.
Use same command in PROC file
Heroku local or Heroku local web : verify your changes in local
In answer how to debug further. Run your app, then straight away login to Heroku, go to your app, then in the 'More' dropdown, click 'View Logs'. Should help you out!
I believe there is a way to view the live logs through the terminal too so you can see exactly what is failing.
Try adding @angular-devkit/build-optimizer as a package in the package.json file.
"dependencies": {
"@angular-devkit/build-optimizer": "^0.4.0",
...
}
This allows the post-install flag --aot to run. For some reason this package isn't built in anymore.
来源：https://stackoverflow.com/questions/48479575/deploy-angular-5-nodejs-express-app-to-heroku