Angular Deploy 8 Heroku

Question

I am doing the Deploy of an Angular8 application, but it seems that Angular is not building in this process. It is possible to inspect the code in the browser, but nothing is rendered. Below are the settings and logs of Heroku:

       Detected both "build" and "heroku-postbuild" scripts
       Running heroku-postbuild

       > [email protected] heroku-postbuild /tmp/build_4d098a2e09d8365e718fcb24180e2544
       > npm run build:prod


       > [email protected] build:prod /tmp/build_4d098a2e09d8365e718fcb24180e2544
       > ng build --prod
    -----> Build succeeded!
-----> Discovering process types
       Procfile declares types     -> (none)
       Default types for buildpack -> web
-----> Compressing...
       Done: 41.3M
-----> Launching...
       Released v13
       https://capitu.herokuapp.com/ deployed to Heroku

My package.json has the following configuration:

{
  "name": "chat-bot",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "./node_modules/.bin/ng build --prod",
    "build:prod": "ng build --prod",
    "heroku-postbuild": "npm run build:prod"
  },
  "engines": {
    "node": "v10.16.3",
    "npm": "5.8.0"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.7",
    "@angular/common": "~8.2.7",
    "@angular/compiler": "~8.2.7",
    "@angular/core": "~8.2.7",
    "@angular/forms": "~8.2.7",
    "@angular/platform-browser": "~8.2.7",
    "@angular/platform-browser-dynamic": "~8.2.7",
    "@angular/router": "~8.2.7",
    "express": "^4.17.1",
    "path": "^0.12.7",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.5",
    "@angular/cli": "~8.3.5",
    "@angular/compiler-cli": "~8.2.7",
    "@angular/language-service": "~8.2.7",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "api-ai-javascript": "^2.0.0-beta.21",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }
}

And finally the server.js is configured in the format below to run the angular application:

//Install express server
const express = require('express');
const path = require('path');

const app = express();

// Serve only the static files form the angularapp directory
app.use(express.static(__dirname + '/src'));

app.get('/', (req,res) => {

res.render(__dirname + '/index.html')
});

// Start the app by listening on the default Heroku port
app.listen(process.env.PORT || 8080);

Below is the application link in Heroku: https://capitu.herokuapp.com/

Answer 1

I compared it to my system and it has a different thing.

"scripts": {
"ng": "ng",
"start": "node server.js",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"heroku-postbuild": "ng build --prod"},

And the dependencies of "devDependencies", have to stay inside the key "dependencies",

Made these settings my deploy rose correctly.

Answer 2

If someone goes through the same error the package.json settings are correct. One should only point the Node.js static files to the compiled Angular dist with the following configuration the server.js

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

const app = express();

// Serve only the static files form the angularapp directory
app.use(express.static(__dirname + '/dist/chatBot'));

app.get('/', function(req,res) {

res.sendFile(path.join(__dirname+'/dist/chatBot/index.html'));
});

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

If you have doubts about configuring dist in the terminal within the project folder just run the command:

heroku run bash

And see the settings