feat(serve): add --hmr flag for HotModuleReplacement support (angular#3330)

Author: jschwarty

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

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