Add hmr

diff --git a/client/package.json b/client/package.json
index b8103d433dc7b7ca2a8a1d00d66e8cbe472c71a7..14c20e8d9420423369daa39c1d886894378db635 100644 (file)
--- a/client/package.json
+++ b/client/package.json
@@ -33,6 +33,7 @@
     "@angular/platform-browser": "~5.1.0",
     "@angular/platform-browser-dynamic": "~5.1.0",
     "@angular/router": "~5.1.0",
+    "@angularclass/hmr": "^2.1.3",
     "@ngx-meta/core": "^4.0.1",
     "@types/core-js": "^0.9.28",
     "@types/markdown-it": "^0.0.4",

diff --git a/client/src/environments/environment.prod.ts b/client/src/environments/environment.prod.ts
index c9f5a3b63fbd46d0e2382ac4e28da40e3b28b9af..d5dfe55736a9cca038e9af51fbade0b911a9ba77 100644 (file)
--- a/client/src/environments/environment.prod.ts
+++ b/client/src/environments/environment.prod.ts
@@ -1,4 +1,5 @@
 export const environment = {
   production: true,
+  hmr: false,
   apiUrl: ''
 }

diff --git a/client/src/environments/environment.ts b/client/src/environments/environment.ts
index 43d78854103877b00773b6f1b49c1476c430330f..42b8baee8bb3d076de13fff44bb393cc8b73135a 100644 (file)
--- a/client/src/environments/environment.ts
+++ b/client/src/environments/environment.ts
@@ -5,5 +5,6 @@
 
 export const environment = {
   production: false,
+  hmr: true,
   apiUrl: 'http://localhost:9000'
 }

diff --git a/client/src/hmr.ts b/client/src/hmr.ts
new file mode 100644 (file)
index 0000000..4d707a2
--- /dev/null
+++ b/client/src/hmr.ts
@@ -0,0 +1,16 @@
+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/client/src/main.ts b/client/src/main.ts
index f3825fe50cbbbe79226afda1603c1053ec5b71fb..b02b6830f4c1f0f9c722f045b81d02356d076594 100644 (file)
--- a/client/src/main.ts
+++ b/client/src/main.ts
@@ -4,10 +4,22 @@ 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()
+const bootstrap = () => platformBrowserDynamic()
   .bootstrapModule(AppModule)
-  .catch(err => console.log(err))
+
+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()
+}

diff --git a/client/yarn.lock b/client/yarn.lock
index b21624ec5e9934114e8f89a0c4561e2ce2277ac3..5c63a68a64be1ee9e7d0adce57a25db2e913940a 100644 (file)
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -158,6 +158,10 @@
   dependencies:
     tslib "^1.7.1"
 
+"@angularclass/hmr@^2.1.3":
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/@angularclass/hmr/-/hmr-2.1.3.tgz#34e658ed3da37f23b0a200e2da5a89be92bb209f"
+
 "@ngtools/json-schema@1.1.0", "@ngtools/json-schema@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@ngtools/json-schema/-/json-schema-1.1.0.tgz#c3a0c544d62392acc2813a42c8a0dc6f58f86922"

diff --git a/scripts/watch/client.sh b/scripts/watch/client.sh
index b754ade769b563f96859e38ed17a9909e5747514..6d4759b4ef8a231bc4e43c97fa665ef11877de4e 100755 (executable)
--- a/scripts/watch/client.sh
+++ b/scripts/watch/client.sh
@@ -2,4 +2,4 @@
 
 cd client || exit -1
 
-ng server --host localhost --port 3000
+ng server --hmr --host localhost --port 3000