From 769e67c2f3cab448c984f40548ba08c8010593c3 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Thu, 21 Sep 2017 10:58:19 +0300
Subject: [PATCH] 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                    |  1 +
 package-lock.json                    |  9 ++++++++-
 package.json                         |  3 +++
 src/environments/environment.hmr.ts  |  4 ++++
 src/environments/environment.prod.ts |  3 ++-
 src/environments/environment.ts      |  3 ++-
 src/hmr.ts                           | 15 +++++++++++++++
 src/main.ts                          | 20 +++++++++++++++++++-
 8 files changed, 54 insertions(+), 4 deletions(-)
 create mode 100644 src/environments/environment.hmr.ts
 create mode 100644 src/hmr.ts

diff --git a/.angular-cli.json b/.angular-cli.json
index ccf86d4d..8e74396f 100644
--- a/.angular-cli.json
+++ b/.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"
             }
         }
diff --git a/package-lock.json b/package-lock.json
index 65a4ac97..80643c94 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index c3770b5b..a54b30a8 100644
--- a/package.json
+++ b/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",
diff --git a/src/environments/environment.hmr.ts b/src/environments/environment.hmr.ts
new file mode 100644
index 00000000..e1c43c7f
--- /dev/null
+++ b/src/environments/environment.hmr.ts
@@ -0,0 +1,4 @@
+export const environment = {
+    production: false,
+    hmr: true
+};
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
index 5d083316..3420b328 100644
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@@ -1,3 +1,4 @@
 export const environment = {
-    production: true
+    production: true,
+    hmr: false
 };
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 6f30aa44..8bd4860c 100644
--- a/src/environments/environment.ts
+++ b/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
 };
diff --git a/src/hmr.ts b/src/hmr.ts
new file mode 100644
index 00000000..29a02d8e
--- /dev/null
+++ b/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();
+    });
+};
diff --git a/src/main.ts b/src/main.ts
index 8254f71b..0c1d9414 100644
--- a/src/main.ts
+++ b/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();
+}