access angular route in nodejs app on heroku - angularjs

Question

I am trying to host an angularjs project on Heroku. App works just fine on local and when running heroku local web.
But when trying to access, I am getting error TypeError: response.sendFile is not a function.
Server.js
//Load HTTP module
var express = require('express');
const app = express();
var http = require("http");
var port = process.env.PORT|| 8000 ;
//Create HTTP server and listen on port 8000 for requests
http.createServer(function (request, response) {
// Set the response HTTP header with HTTP status and Content type
response.writeHead(200, {'Content-Type': 'text/plain'});
// Send the response body "Hello World"
response.end('Hello World\n');
response.sendFile('views/main.html' , { root : __dirname});
console.log(__dirname);
}).listen(port);
// Catch all other routes and return the index file
app.use(express.static(__dirname + '/views'));
app.get('/',function(req, res){
res.sendFile('views/main.html' , { root : __dirname});
});
console.log("\n\n\n"+__dirname+"Hello\n\n\n\n"); // prints /app in node
console
console.log("\n\n"+process.version+"\n\n\n\n"); // v6.10.2
// Print URL for accessing server
console.log('Server running at '+port);
Package.json
{
"name": "startup",
"private": true,
"devDependencies": {
"#angular/cli": "^1.4.7",
"#angular/compiler-cli": "^4.4.0",
"bower": "1.8.0",
"typescript": "^2.3.4",
"graceful-fs": "^4.1.11",
"gulp": "^3.9.0",
"gulp-autoprefixer": "^2.3.1",
"gulp-cache": "^0.2.10",
"gulp-connect": "^2.3.1",
"gulp-filter": "^2.0.2",
"gulp-imagemin": "^2.3.0",
"gulp-jshint": "^1.12.0",
"gulp-karma": "0.0.4",
"gulp-load-plugins": "^0.10.0",
"gulp-minify-css": "^1.2.0",
"gulp-ng-annotate": "^1.0.0",
"gulp-plumber": "^1.0.1",
"gulp-rev": "^5.0.1",
"gulp-rev-replace": "^0.4.2",
"gulp-uglify": "^1.2.0",
"gulp-useref": "^3.0.0",
"gulp-util": "^3.0.6",
"gulp-watch": "^4.2.4",
"jasmine-core": "^2.7.0",
"jshint": "^2.9.5",
"jshint-stylish": "^1.0.0",
"karma": "^1.7.0",
"karma-chrome-launcher": "^2.2.0",
"karma-jasmine": "^1.1.0",
"karma-phantomjs-launcher": "^1.0.4",
"lazypipe": "^0.2.4",
"minimatch": "^3.0.4",
"open": "0.0.5",
"phantomjs-prebuilt": "^2.1.16",
"rimraf": "^2.4.0",
"run-sequence": "^1.1.1",
"wiredep": "^2.2.2"
},
"engines": {
"node": "6.10.2"
},
"dependencies": {
"body-parser": "~1.5.2",
"express": "^4.8.0",
"gulp-bower-fix-css-path": "^0.1.1",
"gzippo": "^0.2.0",
"method-override": "~2.1.2",
"mongoose": "^4.12.4"
},
"scripts": {
"start": "gulp serve"
},
"description": "This project is generated with [yo angular generator](https://github.com/yeoman/generator-angular) version 0.16.0.",
"version": "1.0.0",
"main": "gulpfile.js",
"directories": {
"test": "test"
},
"repository": {
"type": "git",
"url": "1.0.0"
},
"author": "",
"license": "ISC"
}
Few points :
1. node version is "6.10.2"
2. express version is "^4.8.0"
3. res.sendFile with uppercase F or res.sendfile with lowercase f, nothing works.

Answer 1

What build pack are you using on heroku? Is it possible that you have an old version of express in heroku's npm cache? Try heroku config:set NODE_MODULES_CACHE=false and push a change to force a rebuild.
Also note that sendFile is present twice in your code so have you tried to replace it with sendfile at both places.

Answer 2

Resolved.
Instead of http.createServer(function (request, response) {} block, I added app.listen(port);