heroku 中的“未为 webpack-dev-server 启用 HMR”错误

Question

我已经在 Heroku 上部署了我的 angular 应用程序。构建成功，但是当我 在浏览器控制台中访问我的应用程序的URL 时。发生错误，即HMR is not enabled for webpack-dev-server! Are you using the --hmr flag for ng serve?。为什么会这样？

我的 main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment.hmr';
import {hmrBootstrap} from './hmr';

if (environment.production) {
  enableProdMode();
}

const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);

if (environment.hmr) {
  if (module[ 'hot' ]) {
    hmrBootstrap(module, bootstrap);
  } else {
    console.error('HMR is not enabled for webpack-dev-server!');
    console.log('Are you using the --hmr flag for ng serve?');
  }
} else {
  bootstrap();
}

我的package.json档案

{
"name": "demo-project",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "start": "node server.js",
    "hmr": "ng serve --hmr -e=hmr",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor",
    "postinstall": "ng build --aot -prod"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^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-select/ng-select": "^1.3.0",
    "bootstrap": "^4.1.0",
    "core-js": "^2.4.1",
    "enhanced-resolve": "^4.0.0",
    "express": "^4.16.3",
    "moment": "^2.22.1",
    "ngx-bootstrap": "^2.0.4",
    "ngx-google-places-autocomplete": "^2.0.1",
    "path": "^0.12.7",
    "rxjs": "^5.5.6",
    "typescript": "~2.5.3",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "^1.7.4",
    "@angular/compiler-cli": "^5.2.10",
    "@angular/language-service": "^5.2.0",
    "@angularclass/hmr": "^2.1.3",
    "@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",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  },
  "engines": {
    "node": "8.4.0",
    "npm": "5.3.0"
  }
}

我的server.js道路是demo_project > server.js

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(__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);

Answer 1

我不知道这是否是问题的完美解决方案或只是一个解决方法，但它确实有效。我所要做的就是将我的main.ts文件更改为：

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment.hmr';
if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));