I am working on an Angular Application that works fine on my local development machine, but when I host the same code on the remote machine the application does not loads and gives error as 
Changes Made on the remote machine:
- changed- package.json
"scripts": {
...,
"start": "ng serve --host <remote-machine-ip> --port 80",
...}
- changes- node_modules/webpack-dev-server/lib/Server.js
To solve the error of Invalid Host header
line 425
from- return false;
to- return true;
Here is my package.json
{
"name": "admin",
"version": "1.0.0",
"description": "Angular and Bootstrap 4 Template.",
"author": "",
"homepage": "",
"repository": {
"type": "git",
"url": ""
},
"bugs": {
"url": ""
},
"license": "MIT",
"scripts": {
"ng": "ng",
"rimraf": "rimraf",
"changelog": "standard-changelog",
"start": "ng serve --host <remote-machine-ip> --port 8",
"start:hmr": "ng serve --hmr",
"start:aot": "ng serve --aot",
"start:prod": "ng serve --prod",
"start:prod:aot": "ng serve --prod --aot",
"build": "npm run clean:dist && ng build",
"build:prod": "npm run build -- --prod",
"build:prod:aot": "npm run build:prod -- --aot",
"build:ci": "npm run build:prod && npm run build:prod:aot",
"build:demo": "npm run build:prod:aot -- --base-href \"http://akveo.com/ng2-admin/\"",
"test": "ng test -sr",
"test:coverage": "npm run clean:coverage && ng test -sr -cc",
"lint": "ng lint",
"lint:styles": "stylelint ./src/app/**/*.scss",
"lint:ci": "npm run lint && npm run lint:styles",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "ng e2e",
"clean:dist": "npm run rimraf -- dist",
"clean:coverage": "npm run rimraf -- coverage",
"docs:deploy": "wintersmith build -C docs && gh-pages -d docs/build",
"docs:serve": "wintersmith preview -C docs"
},
"private": true,
"dependencies": {
"@angular/animations": "4.1.3",
"@angular/common": "4.1.3",
"@angular/compiler": "4.1.3",
"@angular/core": "4.1.3",
"@angular/forms": "4.1.3",
"@angular/http": "4.1.3",
"@angular/platform-browser": "4.1.3",
"@angular/platform-browser-dynamic": "4.1.3",
"@angular/platform-server": "4.1.3",
"@angular/router": "4.1.3",
"@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.26",
"@ngx-translate/core": "6.0.1",
"@ngx-translate/http-loader": "0.0.3",
"amcharts3": "github:amcharts/amcharts3",
"ammap3": "github:amcharts/ammap3",
"angular2-datatable": "0.6.0",
"animate.css": "3.5.2",
"bootstrap": "4.0.0-alpha.6",
"chart.js": "1.1.1",
"chartist": "0.10.1",
"chroma-js": "1.3.3",
"ckeditor": "4.6.2",
"core-js": "2.4.1",
"easy-pie-chart": "2.1.7",
"font-awesome": "4.7.0",
"fullcalendar": "3.3.1",
"google-maps": "3.2.1",
"ionicons": "2.0.1",
"jquery": "3.2.1",
"jquery-slimscroll": "1.3.8",
"leaflet": "0.7.7",
"leaflet-map": "0.2.1",
"lodash": "4.17.4",
"mydatepicker": "^2.0.22",
"ng2-bs3-modal": "^0.10.4",
"ng2-ckeditor": "1.1.6",
"ng2-completer": "1.3.1",
"ng2-handsontable": "0.48.0",
"ng2-slim-loading-bar": "4.0.0",
"ng2-smart-table": "1.0.3",
"ng2-tree": "2.0.0-alpha.5",
"ngx-uploader": "2.2.5",
"normalize.css": "6.0.0",
"primeng": "^4.2.1",
"roboto-fontface": "0.7.0",
"rxjs": "5.4.0",
"sweetalert2": "^6.6.10",
"zone.js": "0.8.11"
},
"devDependencies": {
"@angular/cli": "1.0.4",
"@angular/compiler-cli": "4.1.3",
"@types/fullcalendar": "2.7.40",
"@types/jasmine": "2.5.38",
"@types/jquery": "2.0.41",
"@types/jquery.slimscroll": "1.3.30",
"@types/lodash": "4.14.61",
"@types/node": "6.0.69",
"codelyzer": "3.0.1",
"gh-pages": "0.12.0",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "3.2.0",
"karma": "1.4.1",
"karma-chrome-launcher": "2.0.0",
"karma-cli": "1.0.1",
"karma-coverage-istanbul-reporter": "0.2.0",
"karma-jasmine": "1.1.0",
"karma-jasmine-html-reporter": "0.2.2",
"npm-run-all": "4.0.2",
"protractor": "5.1.0",
"rimraf": "2.6.1",
"standard-changelog": "1.0.1",
"stylelint": "7.10.1",
"ts-node": "2.1.2",
"tslint": "5.2.0",
"tslint-eslint-rules": "4.0.0",
"tslint-language-service": "0.9.6",
"typescript": "2.3.2",
"typogr": "0.6.6",
"underscore": "1.8.3",
"wintersmith": "2.2.5",
"wintersmith-sassy": "1.1.0"
}
}
Here is angular-cli.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "EpitomEcoders HRMS"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"../node_modules/roboto-fontface/css/roboto/sass/roboto-fontface.scss",
"../node_modules/normalize.css/normalize.css",
"../node_modules/font-awesome/scss/font-awesome.scss",
"../node_modules/ionicons/scss/ionicons.scss",
"../node_modules/bootstrap/scss/bootstrap.scss",
"../node_modules/leaflet/dist/leaflet.css",
"../node_modules/chartist/dist/chartist.css",
"../node_modules/fullcalendar/dist/fullcalendar.css",
"../node_modules/handsontable/dist/handsontable.full.css",
"../node_modules/ng2-slim-loading-bar/style.css",
"../node_modules/sweetalert2/dist/sweetalert2.css",
"../node_modules/primeng/resources/primeng.min.css",
"app/theme/theme.scss",
"styles.scss"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/easy-pie-chart/dist/jquery.easypiechart.js",
"../node_modules/jquery-slimscroll/jquery.slimscroll.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js",
"../node_modules/handsontable/dist/handsontable.full.js",
"../node_modules/chroma-js/chroma.js",
"../node_modules/sweetalert2/dist/sweetalert2.js"
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json"
},
{
"project": "src/tsconfig.spec.json"
},
{
"project": "e2e/tsconfig.e2e.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "scss",
"component": {
}
}
}
Network Logs:
