Heroku angular node.js app not connecting to mlab mongodb database - node.js

My Heroku app launches and works just fine until I try to do anything that interacts with its database, at which point I get an error of "503- service unavailable."
I have installed the mLab add-on in my resources tab and added the proper MONGODB_URI connection string in the config vars section of my settings tab, though I'm not sure whether it's redundant to do both of those.
When I launch the app with localhost it works fine, though I notice it's still using my local database instead of the mLab one.
Here is my server.js file:
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
app.set('port', (process.env.PORT || 5000));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended : true}))
var path = require('path');
app.use(express.static(path.join(__dirname, './dist/public/')));
app.get('*', function(req,res){
res.sendFile(path.join(__dirname, 'dist'));
});
require('./server/config/mongoose.js');
var mongodb = require('mongodb');
var MongoClient = mongodb.MongoClient;
var url = process.env.MONGOLAB_URI;
MongoClient.connect(url, function (err, db) {
if (err) {
console.log('Unable to connect to the mongoDB server. Error:', err);
} else {
console.log('Connection established to', url);
};
var routes_setter = require('./server/config/routes.js');
routes_setter(app);
app.listen(app.get('port'), function(){
console.log('Node app is running on port', app.get('port'))
});
})
And here is my package.json:
{
"name": "public",
"version": "0.0.0",
"main": "server.js",
"scripts": {
"nodemon": "nodemon server.js",
"ng": "ng",
"start": "node server.js",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"postinstall": "ng build --aot -prod"
},
"repository": {
"type": "git",
"url": "https://github.com/ActionPackedJack/Restaurant-Schedule"
},
"engines": {
"node": "11.2.0",
"npm": "6.4.1"
},
"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",
"body-parser": "^1.18.3",
"core-js": "^2.5.4",
"express": "^4.16.4",
"mongodb": "^3.1.10",
"mongoose": "^5.3.12",
"nodemon": "^1.18.6",
"rxjs": "^6.0.0",
"rxjs-compat": "^6.3.3",
"typescript": "~2.7.2",
"zone.js": "^0.8.26"
},
"devDependencies": {
"#angular/cli": "~6.0.8",
"#angular/compiler-cli": "^6.0.3",
"#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",
"typescript": "~2.7.2",
"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"
}
}
Any advice would be greatly appreciated. Thanks so much!

Whitelisting IP addresses on Mlab
Go to cluster
Click tab security
Go to Ip Whitelist
Click on edit
Now yu can whitelist all IPs by clicking “Allow Access From Anywhere” in settings or by providing the whitelist IP: 0.0.0.0/0
it will solve the problem

Related

Unable to host MEAN stack application on Heroku

I'm trying to deploy my application, but the problem is that in my root folder, I've two different folders one for back-end and one for front-end.
First of all I tried to push it as it is, just changed the database from local to cloud.
The push was successful, but I was not able to open the app. Got the following error:
An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details. You can do this from the Heroku CLI with the command
Next, merged both the folders, and made some necessary changes to the routes (followed different tutorials). Now I wasn't able to push even.
Tried a lot of ways, followed and saw different tutorials, read guides and blogs, yet unable to host my application.
My project is working fine in localhost.
Here is my package.json from front-end folder
{
"name": "office-space",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"postinstall": "ng build --aot -prod",
"start":"node server.js"
},
"private": true,
"dependencies": {
"#angular/cli": "~8.1.0",
"#angular/compiler-cli": "~8.1.0",
"#angular/animations": "~8.1.0",
"#angular/common": "~8.1.0",
"#angular/compiler": "~8.1.0",
"#angular/core": "~8.1.0",
"#angular/forms": "~8.1.0",
"#angular/platform-browser": "~8.1.0",
"#angular/platform-browser-dynamic": "~8.1.0",
"#angular/router": "~8.1.0",
"angular-font-awesome": "^3.1.2",
"bootstrap": "^4.3.1",
"font-awesome": "^4.7.0",
"jquery": "^3.4.1",
"material-design-icons": "^3.0.1",
"ngx-pagination": "^4.1.0",
"nonblockjs": "^1.0.8",
"pnotify": "^4.0.0",
"popper.js": "^1.15.0",
"rxjs": "~6.4.0",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.801.0",
"#angular/language-service": "~8.1.0",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"#types/jquery": "^3.3.30",
"#types/node": "~8.9.4",
"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.4.3"
},
"engines": {
"node":"12.3.1",
"npm":"6.11.1"
}
}
and here is the package.json from my back-end folder
{
"name": "api",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"express": "^4.17.1",
"mongoose": "^5.6.10"
}
}
and finally here is my server file
const express = require('express'),
path = require('path'),
bodyParser = require('body-parser'),
cors = require('cors'),
mongoose = require('mongoose'),
//DB = 'mongodb://localhost:27017/OfficeSpace'
DB = 'mongodb+srv://omersjd:omersjdp#officespace-szwno.mongodb.net/OfficeSpace?retryWrites=true&w=majority'
const employeeRoute = require('./routes/employee.route');
//mongoose.Promise = global.Promise;
mongoose.connect(DB, { useNewUrlParser: true }, (err, response) => {
if (err) {
console.log('Error connecting to Database: ', err)
}
else {
console.log('Connected to ' + DB);
}
});
const app = express();
app.use(express.static(__dirname + "/dist"))
app.get('*', function (req, res) {
res.sendFile(path.join(__dirname + "/dist/OfficeSpace/index.html"))
})
app.use(bodyParser.json());
app.use(cors());
app.use('/', employeeRoute);
let port = process.env.PORT || 4000;
//console.log(employeeRoute);
const server = app.listen(port, function () {
console.log('Listening on port ' + port);
})
here is my directory structure:
├── api (backend folder)
└── frontend-app contents
have you checked the error logs ? you can do this by
heroku logs --tail
the error should be of mongodb connection check it and try to resolve...
hope this helps...

app with combined frontend and backend not deploying to Heroku

I have a angular frontend and nodejs backend app. The issue I am having is when I deploy to Heroku, the build and compile succeeds but I think only the backend is being run on heroku when I click open app. I looked at multiple tutorials and resources on how to deploy an angular and nodejs app on heroku and followed all the instructions but am unable to successfully get the full web app(both angular frontend and nodejs backend to Heroku.
the output I get when navigating to the app from the heroku url is:
{"message":"Invalid Token"}
my package.json is :
{
"name": "eserver",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"main": "server.js",
"heroku-postbuild": "ng build --prod",
"preinstall": "npm install -g #angular/cli #angular/compiler-cli
typescript",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^7.2.11",
"#angular/cdk": "~7.3.3",
"#angular/common": "^7.2.11",
"#angular/compiler": "^7.2.11",
"#angular/core": "^7.2.11",
"#angular/flex-layout": "^7.0.0-beta.24",
"#angular/forms": "^7.2.11",
"#angular/http": "^7.2.11",
"#angular/material": "^7.3.3",
"#angular/platform-browser": "^7.2.11",
"#angular/platform-browser-dynamic": "^7.2.11",
"#angular/router": "^7.2.11",
"#fortawesome/fontawesome-free": "^5.6.3",
"#types/chart.js": "^2.7.42",
"#types/web-bluetooth": "0.0.4",
"angular-bootstrap-md": "^7.4.3",
"body-parser": "^1.18.3",
"bootstrap": "^4.3.1",
"chart.js": "^2.5.0",
"core-js": "^2.5.4",
"cors": "^2.8.5",
"dotenv": "^6.1.0",
"express": "^4.16.4",
"hammerjs": "^2.0.8",
"material-design-lite": "^1.3.0",
"ng-multiselect-dropdown": "^0.2.3",
"popper.js": "^1.15.0",
"pusher-js": "^4.4.0",
"rxjs": "^6.4.0",
"#angular-devkit/build-angular": "^0.6.8",
"rxjs-compat": "^6.3.3",
"#angular/compiler-cli": "^7.2.11",
"#angular/cli": "~7.3.7",
"tslib": "^1.9.0",
"uuid": "^3.3.2",
"zone.js": "^0.8.29",
"bcryptjs": "^2.4.3",
"express-jwt": "^5.3.1",
"jsonwebtoken": "^8.2.2",
"mongodb": "^3.0.10",
"mongoose": "^5.1.4",
"pusher": "^2.2.0",
"rootpath": "^0.1.2",
"typescript": "~3.2.4"
},
"devDependencies": {
"#angular/language-service": "^7.2.11",
"#types/jasmine": "~2.8.6",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"angular-cli-ghpages": "^0.5.3",
"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.4.1",
"ts-node": "~5.0.1",
"tslint": "~5.9.1"
}
}
my server.js is:
require('rootpath')();
const express = require('express');
const app = express();
const cors = require('cors');
const bodyParser = require('body-parser');
const jwt = require('./eserver-backend/_helpers/jwt');
const errorHandler = require('./eserver-backend/_helpers/error- handler');
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(cors());
// use JWT auth to secure the api
app.use(jwt());
// api routes
app.use('/users', require('./eserver-
backend/users/users.controller'));
app.use('/categories', require('./eserver-
backend/categories/categories.controller'));
app.use('/items', require('./eserver-
backend/items/items.controller'));
app.use('/tableOrder', require('./eserver-
backend/tableOrder/tableOrder.controller'));
app.use('/orders', require('./eserver-
backend/order/order.controller'));
// global error handler
app.use(errorHandler);
// start server
const port = process.env.NODE_ENV === 'production' ? (process.env.PORT || 80) : 4000;
const server = app.listen(port, function () {
console.log('Server listening on port ' + port);
});
my procfile is:
web: node server.js
my file structure is:
file structure
Node.js app should serve the static files in dist folder which were built with ng build
Add the following code in your server.js file.
// Run the app by serving the static files
// in the dist directory
app.use(express.static(__dirname + '/dist'));
// For all GET requests, send back index.html
// so that PathLocationStrategy can be used
app.get('/*', function(req, res) {
res.sendFile(path.join(__dirname + '/dist/index.html'));
});
Adding this to the server.js fixed the issue
app.use(express.static(__dirname + '/dist/angular-registration-login-example'));
app.get('/*', function(req,res) {
res.sendFile(path.join(__dirname+'/dist/angular-registration-login-example/index.html'));
});

Error while deploying angular app on Heroku server

I am trying to deploy angular app on Heroku server with the following method.
https://medium.com/#hellotunmbi/how-to-deploy-angular-application-to-heroku-1d56e09c5147
If any one have idea about this, please help me as I am trying to go to root of this error. Thanks in Advance
I changed to -prod to --prod and that helped me to deploy the app successfully, however, while opening the app it gives me "" not found error "" and console error is Failed to load resource: the server responded with a status of 404 (Not Found).
here is the link for the app
https://recipebook-angularapp.herokuapp.com/
This app works perfectly on my local server.
Here is my package.json
{
"name": "recipe-book",
"version": "0.0.0",
"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": "~7.2.0",
"#angular/cli": "~7.2.2",
"#angular/common": "~7.2.0",
"#angular/compiler": "~7.2.0",
"#angular/compiler-cli": "~7.2.0",
"#angular/core": "~7.2.0",
"#angular/forms": "~7.2.0",
"#angular/platform-browser": "~7.2.0",
"#angular/platform-browser-dynamic": "~7.2.0",
"#angular/router": "~7.2.0",
"bootstrap": "^3.4.0",
"core-js": "^2.5.4",
"express": "^4.16.4",
"path": "^0.12.7",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"typescript": "~3.2.2",
"zone.js": "~0.8.26"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.12.0",
"#angular/cli": "~7.2.2",
"#angular/compiler-cli": "~7.2.0",
"#angular/language-service": "~7.2.0",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "~4.5.0",
"enhanced-resolve": "^3.3.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.2.2"
},
"engines": {
"node": "11.6.0",
"npm": "6.5.0"
}
}
And server.js
//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('./dist/recipe-book'));
app.get('/*', function(req,res) {
res.sendFile(path.join(__dirname,'/dist/recipe-book/index.html'));
});
// Start the app by listening on the default Heroku port
app.listen(process.env.PORT || 8080);

Starting learning Angular/Node issues when deploying to Heroku

I’m trying to configure a simple Angular / NodeJS app and deploy it with heroku. I'm new on the Angular/Node world, I'm following an online course, locally all works great but when deploying I cannot execute it.
I get the following error when I try to execute on the browser:
Application error
An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details
My package.json is:
{
"name": "ggrande",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"postinstall": "ng build --aot -prod",
"start": "node server.js"
},
"private": true,
"dependencies": {
"#angular/animations": "^6.0.0",
"#angular/cli": "^6.0.3",
"#angular/compiler-cli": "^6.0.2",
"#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",
"body-parser": "^1.18.3",
"bootstrap": "^3.3.7",
"core-js": "^2.5.4",
"express": "^4.16.3",
"mongodb": "^3.1.0-beta4",
"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/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"
},
"engines": {
"node": "10.0.0",
"npm": "5.6.0"
}
}
My Profile is simply:
web: node server.js
And the server.json is:
var express = require("express");
var bodyParser = require("body-parser");
var mongodb = require("mongodb");
var ObjectID = mongodb.ObjectID;
const path = require('path');
var USERS_COLLECTION = "users";
var app = express();
app.use(bodyParser.json());
// Create link to Angular build directory
var distDir = __dirname + "/dist/";
app.use(express.static(distDir));
// Create a database variable outside of the database connection callback to reuse the connection pool in your app.
var db;
// Connect to the database before starting the application server.
mongodb.MongoClient.connect(process.env.MONGODB_URI || "mongodb://localhost:27017/test", function (err, client) {
if (err) {
console.log(err);
process.exit(1);
}
// Save database object from the callback for reuse.
db = client.db();
console.log("Database connection ready");
// Initialize the app.
var server = app.listen(process.env.PORT || 8080, function () {
var port = server.address().port;
console.log("App now running on port", port);
});
app.get('/*', function(req, res) {
res.sendFile(path.join(distDir + '/myapp/index.html'));
})
});
EDIT: I resolved the crash, the problem was in the server.js file. But now /dist/index.html returns a blank page...how it could be?
Thanks in advance for a help.
I had same problem with heroku, but i resolved it by getting the logs files.
Just do one thing, see your logs, you will get the exact error.
1) Go to your project directories,
2) open terminal/cmd
3) type "heroku logs -n 500" command.
it will shows you all the activity of your heroku app, then find the red marked texts, you will get to know the exact errors.
if you can't resolve the issue, just post a clear screenshot of your logs.
Thanks

Deploy Angular 4 / NodeJS to Heroku

I would deploy my Web app to Heroku.
this is the tree of my project :
├── client // Angular project is Here
├── db
├── express-admin
├── index.js
├── node_modules
├── package.json
├── package-lock.json
├── port
├── Procfile
├── README.md
├── routes
└── test.html
I have made these steps :
1) Build Angular 4 app by using ng build -prod --aot=false
2 ) Point Nodejs app to Angular index.html file in /dist folder.
Here's the index.js file:
// Get dependencies
const express = require('express');
const path = require('path');
const http = require('http');
const bodyParser = require('body-parser');
var cool = require('cool-ascii-faces');
//var db = require('./db/connect.js');
// Get our API routes
//const api = require('./server/routes/api');
var appRoutes = require('./routes/index');
const app = express();
// Parsers for POST data
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: false
}));
// Point static path to dist
app.use(express.static(path.join(__dirname, 'client/dist/')));
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT ,DELETE');
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
app.use('/', appRoutes)
// Set our api routes
//app.use('/api', api);
// Catch all other routes and return the index file
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'client/dist/index.html'));
});
app.get('/cool', function(request, response) {
response.send(cool());
});
/**
* Get port from environment and store in Express.
*/
const port = process.env.PORT || '4001';
app.set('port', port);
/**
* Create HTTP server.
*/
const server = http.createServer(app);
/**
* Listen on provided port, on all network interfaces.
*/
server.listen(port, () => console.log(`API running on localhost:${port}`));
3) I Used the official Heroku Guide to deploy NodeJS app
When I open the link generated by Heroku , the index page get loaded but when I try to use login I get this error:
Mixed Content: The page at 'https://lit-island-95274.herokuapp.com/signup' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://localhost:4001/login'. This request has been blocked; the content must be served over HTTPS.
This is my Angular Package.json file :
{
"name": "projecttt",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^4.1.2",
"#angular/common": "^4.1.2",
"#angular/compiler": "^4.1.2",
"#angular/core": "^4.1.2",
"#angular/flex-layout": "^2.0.0-beta.7",
"#angular/forms": "^4.1.2",
"#angular/http": "^4.1.2",
"#angular/material": "2.0.0-beta.4",
"#angular/platform-browser": "^4.1.2",
"#angular/platform-browser-dynamic": "^4.1.2",
"#angular/router": "^4.1.2",
"angular-2-local-storage": "^1.0.1",
"hammerjs": "^2.0.8",
"core-js": "^2.4.1",
"rxjs": "^5.4.1",
"systemjs": "^0.20.14",
"typings": "^2.1.1",
"zone.js": "^0.8.4"
},
"devDependencies": {
"#angular/cli": "^1.4.7",
"#angular/compiler-cli": "^4.4.0",
"#angular/language-service": "^4.0.0",
"#types/jasmine": "~2.5.53",
"#types/jasminewd2": "~2.0.2",
"#types/node": "^8.0.7",
"codelyzer": "~3.0.1",
"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",
"lite-server": "^2.2.2",
"lodash": "^4.16.4",
"protractor": "~5.1.2",
"rimraf": "^2.5.4",
"ts-node": "~3.0.4",
"tslint": "~5.3.2",
"typescript": "^2.3.4"
},
"repository": {},
"main": "karma-test-shim.js"
}
If I had well understood, Angular http routes didn't get deployed because Heroku is not building Angular app, but How to do it ?.
By default heroku does not install any dev dependency therefore move your
"#angular/cli": "^1.4.7",
"#angular/compiler-cli": "^4.4.0",
"typescript": "^2.3.4"
to dependency section and then you can deploy.
As those dependency was in devDependency so heroku could not find those library which causes deployment unsuccessfull.
Hope that helps you.
I have recently deploy Angular app on heroku. My package.json look something like this.
{
"name": "porfolio",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "node app.js",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"postinstall": "ng build --aot -prod"
},
"private": true,
"dependencies": {
"#angular/animations": "^5.2.0",
"#angular/cli": "1.6.8",
"#angular/common": "^5.2.0",
"#angular/compiler": "^5.2.0",
"#angular/compiler-cli": "^5.2.0",
"#angular/core": "^5.2.0",
"#angular/forms": "^5.2.0",
"#angular/http": "^5.2.0",
"#angular/platform-browser": "^5.2.0",
"#angular/platform-browser-dynamic": "^5.2.0",
"#angular/router": "^5.2.0",
"#ng-bootstrap/ng-bootstrap": "^2.0.0",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"express": "^4.16.3",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"ng-teximate": "^0.6.3",
"path": "^0.12.7",
"rxjs": "^5.5.6",
"typescript": "~2.5.3",
"zone.js": "^0.8.19"
},
"devDependencies": {
"#angular/language-service": "^5.2.0",
"#types/jasmine": "~2.8.3",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"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": "~4.1.0"
},
"engines": {
"node": "8.9.4",
"npm": "5.6.0"
}
}
Your start should be node fileName.js. And postinstall will build your application before deploy used by heroku. You also need to add engines which tells which version of engine you was running.
And as pointed out by #monsur you have to add some devDependencies to dependencies which is used by heroku.

Resources