Question

我正在开发一个在我的本地开发机器上工作正常的Angular应用程序，但是当我在远程机器上托管相同的代码时，应用程序不会加载并提供错误

在远程计算机上进行的更改：

changed- package.json

"scripts": { ..., "start": "ng serve --host <remote-machine-ip> --port 80", ...}

changes- node_modules / webpack-dev-server / lib / Server.js

解决Invalid Host header

line 425 
 from- return false;
 to- return true;

这是我的 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"
  }
}

这是 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": {
    }
  }
}

网络日志：

应用程序在开发服务器Angular上加载时卡住

0 个答案: