"HMR is not enabled for webpack-dev-server " error in heroku

Question

I've deployed my angular app over Heroku. The build is successful but when I visit my app's URL In the browser console. An error has occurred i.e., HMR is not enabled for webpack-dev-server! Are you using the --hmr flag for ng serve?. Why is it so?

My 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();
}

My package.json file

{
"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"
  }
}

and my server.js path is 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

I don't know if this is a perfect solution for the question or just a workaround, but it works. All I have to is to change my main.ts file as:

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

Answer 2

A better solution would be to

---

`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));
 }
 `

This would enable hmr based on environment configuration.