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

【问题标题】："HMR is not enabled for webpack-dev-server " error in herokuheroku 中的“未为 webpack-dev-server 启用 HMR”错误
【发布时间】：2018-10-12 12:08:04
【问题描述】：

我已经在 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);

【问题讨论】：

标签： node.js angular heroku webpack

【解决方案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));

【讨论】：

【解决方案2】：

更好的解决方案是

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

 if (environment.hmr === true) {
    if (module['hot']) {
      hmrBootstrap(module, bootstrap);
    } else {
        bootstrap().catch((err) => console.log(err));
   }
 } else {
   bootstrap().catch((err) => console.log(err));
 }
 `

这将根据环境配置启用 hmr。

【讨论】：