Added HMR config. Use 'npm run hmr' for HMR enabled environment. This start script disables the sourcemaps to further increase the re-compile performance. If you need HMR with sourcemaps use 'npm run hmrs'

.angular-cli.json

@@ -25,6 +25,7 @@
             "environmentSource": "environments/environment.ts",
             "environments": {
                 "dev": "environments/environment.ts",
+                "hmr": "environments/environment.hmr.ts",
                 "prod": "environments/environment.prod.ts"
             }
         }

package-lock.json

@@ -237,6 +237,12 @@
         "tsickle": "0.21.6"
       }
     },
+    "@angularclass/hmr": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@angularclass/hmr/-/hmr-2.1.3.tgz",
+      "integrity": "sha1-NOZY7T2jfyOwogDi2lqJvpK7IJ8=",
+      "dev": true
+    },
     "@ngtools/json-schema": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@ngtools/json-schema/-/json-schema-1.1.0.tgz",
@@ -9178,7 +9184,8 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz",
       "integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "uglifyjs-webpack-plugin": {
       "version": "0.4.6",

package.json

@@ -5,6 +5,8 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
+    "hmr": "ng serve --hmr -e=hmr -sm=false",
+    "hmrs": "ng serve --hmr -e=hmr",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
@@ -49,6 +51,7 @@
     "@angular/cli": "1.4.2",
     "@angular/compiler-cli": "4.4.3",
     "@angular/language-service": "4.4.3",
+    "@angularclass/hmr": "2.1.3",
     "@ngtools/webpack": "1.7.1",
     "@types/jasmine": "2.6.0",
     "@types/jasminewd2": "2.0.2",

src/environments/environment.hmr.ts

@@ -0,0 +1,4 @@
+export const environment = {
+    production: false,
+    hmr: true
+};

src/environments/environment.prod.ts

@@ -1,3 +1,4 @@
 export const environment = {
-    production: true
+    production: true,
+    hmr: false
 };

src/environments/environment.ts

@@ -4,5 +4,6 @@
 // The list of which env maps to which file can be found in `.angular-cli.json`.
 
 export const environment = {
-    production: false
+    production: false,
+    hmr: false
 };

src/hmr.ts

@@ -0,0 +1,15 @@
+import { NgModuleRef, ApplicationRef } from '@angular/core';
+import { createNewHosts } from '@angularclass/hmr';
+
+export const hmrBootstrap = (module: any, bootstrap: () => Promise<NgModuleRef<any>>) => {
+    let ngModule: NgModuleRef<any>;
+    module.hot.accept();
+    bootstrap().then(mod => ngModule = mod);
+    module.hot.dispose(() => {
+        const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);
+        const elements = appRef.components.map(c => c.location.nativeElement);
+        const makeVisible = createNewHosts(elements);
+        ngModule.destroy();
+        makeVisible();
+    });
+};

src/main.ts

@@ -3,10 +3,28 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
+import { hmrBootstrap } from './hmr';
 
 if ( environment.production )
 {
     enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule);
+const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);
+
+if ( environment.hmr )
+{
+    if ( module['hot'] )
+    {
+        hmrBootstrap(module, bootstrap);
+    }
+    else
+    {
+        console.error('HMR is not enabled for webpack-dev-server!');
+        console.log('Are you using the --hmr flag for ng serve?');
+    }
+}
+else
+{
+    bootstrap();
+}