10

Hi I am a beginner trying to deploy an app on Heroku. I've successfully deployed an app before but for some reason this time nothing works. I've followed the steps from this blog thoroughly: https://medium.com/@hellotunmbi/how-to-deploy-angular-application-to-heroku-1d56e09c5147

I am on the latest version of angular and node:
"@angular/cli": "^6.0.1", "@angular/compiler-cli": "^6.0.1", "node": "10.1.0", "npm": "6.0.0"

Below is my build log and my package.json file for reference. No error but app doesn't work after deployed :( Please help!!

-----> Node.js app detected
-----> Creating runtime environment

       NPM_CONFIG_LOGLEVEL=error
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true
-----> Installing binaries
       engines.node (package.json):  10.1.0
       engines.npm (package.json):   6.0.0

       Resolving node version 10.1.0...
       Downloading and installing node 10.1.0...
       Bootstrapping npm 6.0.0 (replacing 5.6.0)...
       npm 6.0.0 installed
-----> Restoring cache
       Loading 2 from cacheDirectories (default):
       - node_modules
       - bower_components (not cached - skipping)
-----> Building dependencies
       Installing node modules (package.json + package-lock)

       > [email protected] install /tmp/build_d3da2bc92ebb72e07bb714a5a00a9e5b/node_modules/uws
       > node-gyp rebuild > build_log.txt 2>&1 || exit 0


       > [email protected] postinstall /tmp/build_d3da2bc92ebb72e07bb714a5a00a9e5b
       > ng build --aot

      39% building modules 245/251 modules       Date: 2018-05-11T17:54:52.577Z
       Hash: a1e28c3c7551108d3a72
       Time: 13703ms
       chunk {main} main.js, main.js.map (main) 134 kB [initial] [rendered]
       chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
       chunk {runtime} runtime.js, runtime.js.map (runtime) 5.4 kB [entry] [rendered]
       chunk {styles} styles.js, styles.js.map (styles) 134 kB [initial] [rendered]
       chunk {vendor} vendor.js, vendor.js.map (vendor) 3.03 MB [initial] [rendered]
       added 116 packages from 166 contributors, removed 24 packages, updated 41 packages and moved 7 packages in 54.687s
       [!] 13 vulnerabilities found [21934 packages audited]
       Severity: 3 low | 5 moderate | 5 high
       Run `npm audit` for more detail

-----> Caching build
       Clearing previous node cache
       Saving 2 cacheDirectories (default):
       - node_modules
       - bower_components (nothing to cache)
-----> Pruning devDependencies
       removed 806 packages in 12.697s
       [+] no known vulnerabilities found [9183 packages audited]

-----> Build succeeded!
-----> Discovering process types
       Procfile declares types     -> (none)
       Default types for buildpack -> web
-----> Compressing...
       Done: 52.6M
-----> Launching...
       Released v16
       https://c-clin-ng-chatbots.herokuapp.com/ deployed to Heroku

package.json file: (I have to use ng build --aot instead of ng build --aot -prod because the latter gives me an error in the build log saying > ng build --aot -prod Unknown option: '-p'. This worked for me in my previous app.)

{
  "name": "angular-chatbot",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ng build --aot",
    "start": "node server.js"
  },
  "private": true,
  "dependencies": {
    "@angular/cli": "^6.0.1",
    "@angular/compiler-cli": "^6.0.1",
    "@angular/animations": "^6.0.0",
    "@angular/common": "^6.0.0",
    "@angular/compiler": "^6.0.0",
    "@angular/core": "^6.0.0",
    "@angular/forms": "^6.0.0",
    "@angular/http": "^6.0.0",
    "@angular/platform-browser": "^6.0.0",
    "@angular/platform-browser-dynamic": "^6.0.0",
    "@angular/router": "^6.0.0",
    "bootstrap": "^3.3.7",
    "core-js": "^2.5.4",
    "express": "^4.16.3",
    "path": "^0.12.7",
    "rxjs": "^6.0.0",
    "typescript": "~2.7.2",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.0",
    "@angular/cli": "^6.0.1",
    "@angular/compiler-cli": "^6.0.1",
    "@angular/language-service": "^6.0.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "enhanced-resolve": "^3.3.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"
  },
  "engines": {
    "node": "10.1.0",
    "npm": "6.0.0"
  }
}
2
  • at the beginning i thought that you are using unsupported nodejs/npm versions by heroku. but it seems that they support them devcenter.heroku.com/articles/nodejs-support#node-js-runtimes why don't you try some older versions ? "node": "10.1.0" is the latest version they support :D
    – DrNio
    May 11, 2018 at 19:18
  • i see the error Cannot GET / . can you please post your nodejs routes of the server.js file ?
    – DrNio
    May 11, 2018 at 19:21

2 Answers 2

10

I think the problem is in the server.js try :

app.use(express.static(${__dirname}/front-end/dist/));

app.get('*', (req, res) => {
    res.sendFile(`./front-end/dist/index.html`); // load the single view file (angular will handle the page changes on the front-end)
});

where app is const app = express();

obviously change the path to your dist folder.

3
  • You're right my path was wrong. It finally works now. Thank you so much for your help!!
    – catherine
    May 11, 2018 at 20:26
  • my app doesn't compile at all. > [email protected] postinstall /tmp/build_47569a89d3fad6f61d1a588169345d23 > ng build -aot Unknown option: '-a'
    – Logan_B
    May 14, 2018 at 1:11
  • nvm the option was --aot, i only had 1 dash
    – Logan_B
    May 14, 2018 at 1:18
0

If you get Not found on Heroku launch app page, then it is because the path is wrong.

Update your server.js file to this:

// server.js

const express = require('express');
const app = express();

app.use(express.static('./dist/'));

app.get('/*', (req, res) => {
  res.sendFile('index.html', { root: 'dist/' });
});

app.listen(process.env.PORT || 8080);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.