title: ASP.NET Core Angular 2 Webpack Hot Module Replacement
body: <p>I've a blank ASP.NET Core 1.0.1 project where I'm trying to integrate Angular 2 from scratch with Webpack Module Bundler. I'm trying to use Hot Module Replacement (HMR) using ASP.NET Core SpaServices to avoid browser reload but I don't get any message on Browser's console saying HMR is connected! I have to manually run the webpack command to compile Typescript files and re-run the application. I'm using <code>"Microsoft.AspNetCore.AngularServices": "1.0.0-*",</code> NuGet package. Also, I'm confronting the error in the browser's console as: <code>__webpack_hmr connetion refused</code>. Below is my <code>project.json</code> file:</p>
  
  <pre><code>{
      "version": "1.0.0",
      "name": "asp.net",
      "private": true,
      "dependencies": {
          "@angular/common": "2.4.1",
          "@angular/compiler": "2.4.1",
          "@angular/core": "2.4.1",
          "@angular/forms": "2.4.1",
          "@angular/http": "2.4.1",
          "@angular/platform-browser": "2.4.1",
          "@angular/platform-browser-dynamic": "2.4.1",
          "@angular/router": "3.4.1",
          "@angular/upgrade": "2.4.1",
          "core-js": "^2.4.1",
          "reflect-metadata": "^0.1.9",
          "rxjs": "^5.0.3",
          "zone.js": "^0.7.4"
      },
      "devDependencies": {
          "html-webpack-plugin": "2.26.0",
          "tsc": "1.20150623.0",
          "ts-loader": "2.0.0",
          "typescript": "2.1.5",
          "typings": "2.1.0",
          "webpack-hot-middleware": "2.16.1",
          "webpack-node-externals": "1.5.4",
          "webpack-externals-plugin": "1.0.0",
          "aspnet-webpack": "1.0.27",
          "webpack": "2.2.1"
      }
  }
  </code></pre>
  
  <p>The <code>Startup.cs</code> class's <code>Configure()</code> method:</p>
  
  <pre><code>public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
  {
      loggerFactory.AddConsole();
      if (env.IsDevelopment())
      {
          app.UseDeveloperExceptionPage();
          app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
          {
              HotModuleReplacement = true
          });
      }
  
      app.UseMvc();
  
      DefaultFilesOptions options = new DefaultFilesOptions();
      options.DefaultFileNames.Clear();
      options.DefaultFileNames.Add("Index.html");
      app.UseDefaultFiles(options);
      app.UseStaticFiles();
  }
  </code></pre>
  
  <p>and <code>webpack.config.js</code> file:</p>
  
  <pre><code>"use strict";
  
  var webpack = require('webpack');
  
  module.exports = {
      entry: { main: "./app/main.ts" },
      output: {
          filename: '/wwwroot/dist/bundle.js',
          publicPath: '/wwwroot/dist/'
      },
      module: {
          rules: [
              { test: /\.ts$/, loader: 'ts-loader' },
          ]
      },
      plugins: [
          // Put webpack plugins here if needed, or leave it as an empty array if not
      ]
  }
  </code></pre>
  
  <p>Also if you have any useful link or GitHub repo having Angular 2, Webpack and ASP.NET Core topics, please do share with me.</p>