add --inline-client command option to customize inline client URL for livereload in webpack-dev-server

Author: elclanrs

packages/angular-cli/commands/serve.ts

@@ -36,6 +36,7 @@ export interface ServeTaskOptions {
   i18nFile?: string;
   i18nFormat?: string;
   locale?: string;
+  inlineClient?: string;
 }
 
 const ServeCommand = Command.extend({
@@ -109,7 +110,13 @@ const ServeCommand = Command.extend({
     },
     { name: 'i18n-file',       type: String, default: null },
     { name: 'i18n-format',     type: String, default: null },
-    { name: 'locale',         type: String, default: null }
+    { name: 'locale',         type: String, default: null },
+    {
+      name: 'inline-client',
+      type: String,
+      aliases: ['ic'],
+      description: 'Websocket client URL for Webpack inline mode (Defaults to "http://host:port")'
+    }
   ],
 
   run: function(commandOptions: ServeTaskOptions) {
@@ -126,6 +133,9 @@ const ServeCommand = Command.extend({
     Version.assertAngularVersionIs2_3_1OrHigher(this.project.root);
     commandOptions.liveReloadHost = commandOptions.liveReloadHost || commandOptions.host;
 
+    commandOptions.inlineClient = commandOptions.inlineClient ||
+      `http://${commandOptions.host}:${commandOptions.port}/`;
+
     return this._checkExpressPort(commandOptions)
       .then(this._autoFindLiveReloadPort.bind(this))
       .then((opts: ServeTaskOptions) => {

packages/angular-cli/tasks/serve-webpack.ts

@@ -38,8 +38,9 @@ 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
     let entryPoints = [
-      `webpack-dev-server/client?http://${serveTaskOptions.host}:${serveTaskOptions.port}/`
+      `webpack-dev-server/client?${serveTaskOptions.inlineClient}/`
     ];
+
     if (serveTaskOptions.hmr) {
       const webpackHmrLink = 'https://webpack.github.io/docs/hot-module-replacement.html';
       ui.writeLine(oneLine`