Introduce hot module replacement

Author: akirasosa

config/helpers.js

@@ -1,5 +1,5 @@
-var path = require('path');
-var _root = path.resolve(__dirname, '..');
+const path = require('path');
+const _root = path.resolve(__dirname, '..');
 
 function hasProcessFlag(flag) {
   return process.argv.join('').indexOf(flag) > -1;
@@ -10,5 +10,10 @@ function root(args) {
   return path.join.apply(path, [_root].concat(args));
 }
 
+function prod() {
+  return process.env.NODE_ENV === 'production';
+}
+
 exports.hasProcessFlag = hasProcessFlag;
 exports.root = root;
+exports.prod = prod;

config/webpack.common.js

@@ -21,6 +21,7 @@ module.exports = {
       {
         test: /\.ts$/,
         loaders: [
+          '@angularclass/hmr-loader',
           'awesome-typescript-loader',
           'angular2-template-loader',
           'angular2-router-loader?loader=system',

config/webpack.dev.js

@@ -12,7 +12,8 @@ module.exports = webpackMerge(commonConfig, {
     filename: '[name].js',
     sourceMapFilename: '[name].map',
     chunkFilename: '[id].chunk.js',
-    publicPath: '/'
+    // required for hot module replacement
+    publicPath: 'http://localhost:4200/',
   },
   plugins: [
     new webpack.DefinePlugin({

package.json

@@ -16,7 +16,7 @@
     "prebuild:prod": "yarn run clean:dist",
     "build:prod": "yarn run ngc && webpack --config config/webpack.aot.js --progress --profile --bail",
     "server": "yarn run server:dev",
-    "server:dev": "webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base src/",
+    "server:dev": "webpack-dev-server --config config/webpack.dev.js --progress --profile --hot --watch --content-base src/",
     "server:prod": "node server.js",
     "test": "karma start",
     "test:watch": "yarn run karma:watch",
@@ -44,6 +44,8 @@
     "@angular/platform-browser": "^2.1.0",
     "@angular/platform-browser-dynamic": "^2.1.0",
     "@angular/router": "^3.1.0",
+    "@angularclass/hmr": "^1.2.2",
+    "@angularclass/hmr-loader": "^3.0.2",
     "aphrodite": "^1.0.0",
     "bootstrap": "^4.0.0-alpha.4",
     "core-js": "^2.4.1",

src/app/app.module.ts

@@ -1,4 +1,4 @@
-import {NgModule} from "@angular/core";
+import {NgModule, ApplicationRef} from "@angular/core";
 import {BrowserModule} from "@angular/platform-browser";
 import {RouterModule, PreloadAllModules} from "@angular/router";
 import {FormsModule, ReactiveFormsModule} from "@angular/forms";
@@ -12,7 +12,11 @@ import {TopModule} from "./pages/top/top.module";
 import {NoContentComponent} from "./pages/no-content/no-content.component";
 import {HeaderModule} from "./components/header/header.module";
 import {SharedModule} from "./shared/shared.module";
-import {ToastModule} from "./core/toast/toast.module";
+import {
+  removeNgStyles,
+  createInputTransfer,
+  createNewHosts
+} from "@angularclass/hmr";
 
 @NgModule({
   bootstrap: [AppComponent],
@@ -40,5 +44,44 @@ import {ToastModule} from "./core/toast/toast.module";
   ]
 })
 export class AppModule {
+  constructor(public appRef: ApplicationRef) {
+  }
+
+  hmrOnInit(store) {
+    if (!store || !store.state) return;
+    console.log('HMR store', store);
+    console.log('store.state.data:', store.state.data);
+    // inject AppStore here and update it
+    // this.AppStore.update(store.state)
+    if ('restoreInputValues' in store) {
+      store.restoreInputValues();
+    }
+    // change detection
+    this.appRef.tick();
+    delete store.state;
+    delete store.restoreInputValues;
+  }
+
+  hmrOnDestroy(store) {
+    const cmpLocation = this.appRef.components.map(cmp => cmp.location.nativeElement);
+    // recreate elements
+    store.disposeOldHosts = createNewHosts(cmpLocation);
+    // inject your AppStore and grab state then set it on store
+    // var appState = this.AppStore.get()
+    store.state = {data: 'yolo'};
+    // store.state = Object.assign({}, appState)
+    // save input values
+    store.restoreInputValues = createInputTransfer();
+    // remove styles
+    removeNgStyles();
+  }
+
+  hmrAfterDestroy(store) {
+    // display new elements
+    store.disposeOldHosts();
+    delete store.disposeOldHosts;
+    // anything you need done the component is removed
+  }
+
 }
 

src/main.ts

@@ -1,8 +1,15 @@
 import {platformBrowserDynamic} from "@angular/platform-browser-dynamic";
 import {AppModule} from "./app";
 import {decorateModuleRef} from "./app/environment";
+import {bootloader} from "@angularclass/hmr";
+
+export function main(): Promise<any> {
+  return platformBrowserDynamic()
+    .bootstrapModule(AppModule)
+    .then(decorateModuleRef)
+    .catch(err => console.error(err));
+}
+
+// needed for hmr
+bootloader(main);
 
-platformBrowserDynamic()
-  .bootstrapModule(AppModule)
-  .then(decorateModuleRef)
-  .catch(err => console.error(err));

yarn.lock

@@ -52,6 +52,16 @@
   dependencies:
     tsickle "^0.1.7"
 
+"@angularclass/hmr":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@angularclass/hmr/-/hmr-1.2.2.tgz#46a18f89a1e94d05c268b83c9480e005f73fc265"
+
+"@angularclass/hmr-loader":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@angularclass/hmr-loader/-/hmr-loader-3.0.2.tgz#c789182411f09d0b98929e6acbfd3e4aeaace597"
+  dependencies:
+    loader-utils "^0.2.15"
+
 "@types/jasmine@^2.5.35":
   version "2.5.37"
   resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.5.37.tgz#15f16040b1106941ec4aeefa3cd9c55342a0dcbb"