From 46efa9edab33fd085e19576379110a421ff3629c Mon Sep 17 00:00:00 2001
From: Justin Schwartzenberger <jschwarty@users.noreply.github.com>
Date: Thu, 1 Dec 2016 11:21:52 -0800
Subject: [PATCH] feat(serve): add --hmr flag for HotModuleReplacement support
 (#3330)

---
 packages/angular-cli/commands/serve.ts      |  7 +++++++
 packages/angular-cli/tasks/serve-webpack.ts | 20 ++++++++++++++++++--
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/packages/angular-cli/commands/serve.ts b/packages/angular-cli/commands/serve.ts
index 2105485af1a0..b9fa384b188e 100644
--- a/packages/angular-cli/commands/serve.ts
+++ b/packages/angular-cli/commands/serve.ts
@@ -31,6 +31,7 @@ export interface ServeTaskOptions {
   progress?: boolean;
   open?: boolean;
   vendorChunk?: boolean;
+  hmr?: boolean;
 }
 
 const ServeCommand = Command.extend({
@@ -96,6 +97,12 @@ const ServeCommand = Command.extend({
       aliases: ['o'],
       description: 'Opens the url in default browser',
     },
+    {
+      name: 'hmr',
+      type: Boolean,
+      default: false,
+      description: 'Enable hot module replacement',
+    },
   ],
 
   run: function(commandOptions: ServeTaskOptions) {
diff --git a/packages/angular-cli/tasks/serve-webpack.ts b/packages/angular-cli/tasks/serve-webpack.ts
index 71cb640c070c..7498e25f0f94 100644
--- a/packages/angular-cli/tasks/serve-webpack.ts
+++ b/packages/angular-cli/tasks/serve-webpack.ts
@@ -34,9 +34,23 @@ export default Task.extend({
 
     // This allows for live reload of page when changes are made to repo.
     // https://webpack.github.io/docs/webpack-dev-server.html#inline-mode
-    config.entry.main.unshift(
+    let entryPoints = [
       `webpack-dev-server/client?http://${serveTaskOptions.host}:${serveTaskOptions.port}/`
-    );
+    ];
+    if (serveTaskOptions.hmr) {
+      const webpackHmrLink = 'https://webpack.github.io/docs/hot-module-replacement.html';
+      ui.writeLine(oneLine`
+        ${chalk.yellow('NOTICE')} Hot Module Replacement (HMR) is enabled for the dev server.
+      `);
+      ui.writeLine('  The project will still live reload when HMR is enabled,');
+      ui.writeLine('  but to take advantage of HMR additional application code is required');
+      ui.writeLine('  (not included in an angular-cli project by default).');
+      ui.writeLine(`  See ${chalk.blue(webpackHmrLink)}`);
+      ui.writeLine('  for information on working with HMR for Webpack.');
+      entryPoints.push('webpack/hot/dev-server');
+      config.plugins.push(new webpack.HotModuleReplacementPlugin());
+    }
+    config.entry.main.unshift(...entryPoints);
     webpackCompiler = webpack(config);
 
     const statsConfig = getWebpackStatsConfig(serveTaskOptions.verbose);
@@ -90,6 +104,8 @@ export default Task.extend({
       webpackDevServerConfiguration.cert = sslCert;
     }
 
+    webpackDevServerConfiguration.hot = serveTaskOptions.hmr;
+
     ui.writeLine(chalk.green(oneLine`
       **
       NG Live Development Server is running on