Ошибка "HMR не включена для webpack-dev-server" в heroku

Question

Я развернул свое угловое приложение над Heroku. Сборка прошла успешно, но когда я захожу на 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));