Enable Webpack dev middleware and basic (non-state-preserving) HMR for Angular template

SteveSandersonMS · SteveSandersonMS · commit d102fdb363fe · 2016-02-29T10:48:26.000Z
diff --git a/templates/Angular2Spa/ClientApp/boot.ts b/templates/Angular2Spa/ClientApp/boot.ts
@@ -7,3 +7,10 @@ import { Http, HTTP_PROVIDERS } from 'angular2/http';
 import { App } from './components/app/app';
 
 bootstrap(App, [router.ROUTER_BINDINGS, HTTP_PROVIDERS, FormBuilder]);
+
+// Basic hot reloading support. Automatically reloads and restarts the Angular 2 app each time
+// you modify source files. This will not preserve any application state other than the URL.
+declare var module: any;
+if (module.hot) {
+    module.hot.accept();
+}
diff --git a/templates/Angular2Spa/Startup.cs b/templates/Angular2Spa/Startup.cs
@@ -4,6 +4,7 @@
 using System.Threading.Tasks;
 using Microsoft.AspNet.Builder;
 using Microsoft.AspNet.Hosting;
+using Microsoft.AspNet.SpaServices.Webpack;
 using Microsoft.Extensions.Configuration;
 using Microsoft.Extensions.DependencyInjection;
 using Microsoft.Extensions.Logging;
@@ -46,6 +47,14 @@ public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerF
             }
 
             app.UseIISPlatformHandler();
+            
+            if (env.IsDevelopment())
+            {
+                app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
+                {
+                    HotModuleReplacement = true
+                });
+            }
 
             app.UseStaticFiles();
 
diff --git a/templates/Angular2Spa/package.json b/templates/Angular2Spa/package.json
@@ -2,22 +2,26 @@
   "name": "WebApplicationBasic",
   "version": "0.0.0",
   "devDependencies": {
-    "babel-loader": "^6.2.3",
+    "babel-loader": "^6.2.4",
     "babel-preset-es2015": "^6.5.0",
     "babel-preset-react": "^6.5.0",
     "bootstrap": "^3.3.6",
     "css-loader": "^0.23.1",
     "expose-loader": "^0.7.1",
+    "express": "^4.13.4",
     "extendify": "^1.0.0",
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.8.5",
     "jquery": "^2.2.1",
+    "ntypescript": "^1.201602282304.1",
     "raw-loader": "^0.5.1",
     "style-loader": "^0.13.0",
     "ts-loader": "^0.8.1",
     "typescript": "^1.8.2",
     "url-loader": "^0.5.7",
-    "webpack": "^1.12.14"
+    "webpack": "^1.12.14",
+    "webpack-dev-middleware": "^1.5.1",
+    "webpack-hot-middleware": "^2.7.1"
   },
   "dependencies": {
     "angular2": "^2.0.0-beta.7",
