Angular 6: Npm ERR! Missing Script: Start when deploying to heroku

Question

I have a simple angular 6 app , I have deployed to heroku but when I run ,

 heroku logs

I get the following error

2018-07-15T00:45:51.000000+00:00 app[api]: Build succeeded
2018-07-15T00:45:53.901220+00:00 heroku[web.1]: Starting process with command `npm start`
2018-07-15T00:45:56.221740+00:00 heroku[web.1]: Process exited with status 1
2018-07-15T00:45:56.166323+00:00 app[web.1]: npm ERR! missing script: start
2018-07-15T00:45:56.174458+00:00 app[web.1]:
2018-07-15T00:45:56.174761+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2018-07-15T00:45:56.174953+00:00 app[web.1]: npm ERR!     /app/.npm/_logs/2018-07-15T00_45_56_169Z-debug.log
2018-07-15T00:45:56.236130+00:00 heroku[web.1]: State changed from starting to crashed
2018-07-15T00:45:56.238073+00:00 heroku[web.1]: State changed from crashed to starting
2018-07-15T00:45:59.380249+00:00 heroku[web.1]: Starting process with command `npm start`
2018-07-15T00:46:01.530698+00:00 app[web.1]: npm ERR! missing script: start
2018-07-15T00:46:01.544315+00:00 app[web.1]:
2018-07-15T00:46:01.544530+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2018-07-15T00:46:01.544632+00:00 app[web.1]: npm ERR!     /app/.npm/_logs/2018-07-15T00_46_01_533Z-debug.log
2018-07-15T00:46:01.624476+00:00 heroku[web.1]: State changed from starting to crashed
2018-07-15T00:46:01.603498+00:00 heroku[web.1]: Process exited with status 1

Here is my package.json

{
  "name": "product-client",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "grunt sass:production && ng build --aot --prod",
    "start": "ng serve"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/cli": "~6.0.8",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/compiler-cli": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "@ng-bootstrap/ng-bootstrap": "^2.2.0",
    "angular2-flash-messages": "^2.0.5",
    "bootstrap": "^3.3.7",
    "bootstrap-select-v4": "^1.12.4",
    "brew": "0.0.8",
    "brew-tree": "0.0.2",
    "cities.json": "^1.1.2",
    "core-js": "^2.5.4",
    "igniteui-angular": "^6.1.0",
    "jquery": "^3.3.1",
    "ngx-bootstrap": "^3.0.1",
    "primeicons": "^1.0.0-beta.9",
    "primeng": "^6.0.0",
    "rxjs": "^6.2.1",
    "rxjs-compat": "^6.2.1",
    "tree-cli": "^0.4.12",
    "winston": "^3.0.0",
    "zone.js": "^0.8.26"
  },
  "engines": {
    "node": "8.9.4",
    "npm": "5.6.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.8",
    "@angular/language-service": "^6.0.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "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": "~2.0.0",
    "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.0-dev.20180108"
  }
}

And here is my procfile

worker: ng serve

Here is my structure

└───src
    ├───app
    │   ├───app-routing
    │   ├───product-detail
    │   ├───product-list
    │   ├───star
    │   └───welcome
    ├───assets
    │   ├───api
    │   │   └───products
    │   └───images
    ├───environments
    └───sass

Note in my local machine everything works fine when I deploy to heroku i get that error,

Note its just a normal angular landing page without rest api

Question

What is wrong with my codes?

Answer 1

You need to Install Server to run your app Locally we run ng serve from terminal to run our app on local browser. But we will need to setup an Express server that will run our production ready app (from dist folder created) only to ensure light-weight and fast loading.

Install Express server by running:

npm install express path --save

Create a server.js file in the root of the application and paste the following code.

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

    const app = express();

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

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

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

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

Change start command In package.json, change the “start” command to node server.js so it becomes:

"start": "node server.js"

Here's what the complete package.json looks like. Yours may contain more depending on your application-specific packages.

Now your package,json should look like this

{
  "name": "product-client",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "grunt sass:production && ng build --aot --prod",
    "start": "node server.js"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/cli": "~6.0.8",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/compiler-cli": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "@ng-bootstrap/ng-bootstrap": "^2.2.0",
    "angular2-flash-messages": "^2.0.5",
    "bootstrap": "^3.3.7",
    "bootstrap-select-v4": "^1.12.4",
    "brew": "0.0.8",
    "brew-tree": "0.0.2",
    "cities.json": "^1.1.2",
    "core-js": "^2.5.4",
    "igniteui-angular": "^6.1.0",
    "jquery": "^3.3.1",
    "ngx-bootstrap": "^3.0.1",
    "primeicons": "^1.0.0-beta.9",
    "primeng": "^6.0.0",
    "rxjs": "^6.2.1",
    "rxjs-compat": "^6.2.1",
    "tree-cli": "^0.4.12",
    "winston": "^3.0.0",
    "zone.js": "^0.8.26"
  },
  "engines": {
    "node": "8.9.4",
    "npm": "5.6.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.8",
    "@angular/language-service": "^6.0.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "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": "~2.0.0",
    "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.0-dev.20180108"
  }
}