use new @angularclass/hmr

Author: borysn

frontend/package.json

@@ -2,7 +2,7 @@
   "name": "spring-boot-angular2",
   "description": "Spring Boot backend, Angular2 frontend with Webpack, Typescript, Sass, Bootstrap4, Karma, Jasmine",
   "private": true,
-  "version": "1.1.0",
+  "version": "1.0.3",
   "license": "MIT",
   "scripts": {
     "postinstall": "node scripts/fixBootstrapLoader.js",
@@ -63,7 +63,8 @@
     "@types/node": "^7.0.8",
     "@types/source-map": "^0.5.0",
     "@types/webpack": "^2.2.11",
-    "angular2-hmr": "~0.8.1",
+    "@angularclass/hmr": "^1.2.2",
+    "@angularclass/hmr-loader": "^3.0.1",
     "angular2-template-loader": "^0.6.2",
     "autoprefixer": "^6.7.6",
     "awesome-typescript-loader": "3.1.2",

frontend/scripts/fixBootstrapLoader.js

@@ -0,0 +1,60 @@
+// Angular 2
+import {
+  enableDebugTools,
+  disableDebugTools
+} from '@angular/platform-browser';
+import {
+  ApplicationRef,
+  enableProdMode
+} from '@angular/core';
+// Environment Providers
+let PROVIDERS: any[] = [
+  // common env directives
+];
+
+// Angular debug tools in the dev console
+// https://github.com/angular/angular/blob/86405345b781a9dc2438c0fbe3e9409245647019/TOOLS_JS.md
+let _decorateModuleRef = <T>(value: T): T => { return value; };
+
+if ('production' === ENV) {
+  enableProdMode();
+
+  // Production
+  _decorateModuleRef = (modRef: any) => {
+    disableDebugTools();
+
+    return modRef;
+  };
+
+  PROVIDERS = [
+    ...PROVIDERS,
+    // custom providers in production
+  ];
+
+} else {
+
+  _decorateModuleRef = (modRef: any) => {
+    const appRef = modRef.injector.get(ApplicationRef);
+    const cmpRef = appRef.components[0];
+
+    let _ng = (<any> window).ng;
+    enableDebugTools(cmpRef);
+    (<any> window).ng.probe = _ng.probe;
+    (<any> window).ng.coreTokens = _ng.coreTokens;
+    return modRef;
+  };
+
+  // Development
+  PROVIDERS = [
+    ...PROVIDERS,
+    // custom providers in development
+  ];
+
+}
+
+export const decorateModuleRef = _decorateModuleRef;
+
+export const ENV_PROVIDERS = [
+  ...PROVIDERS
+];
+

frontend/src/app/environment.ts

@@ -1,21 +1,13 @@
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
-
+import { bootloader } from '@angularclass/hmr';
+import { decorateModuleRef } from './app/environment';
 import {AppModule} from './app/app.module';
 
-export function main(initialHmrState?: any): Promise<any> {
-  return platformBrowserDynamic().bootstrapModule(AppModule)
-    .catch(err => console.error(err));
+export function main(): Promise<any> {
+  return platformBrowserDynamic()
+    .bootstrapModule(AppModule)
+    .then(decorateModuleRef)
+    .catch((err) => console.error(err));
 }
 
-/*
- * Hot Module Reload
- * experimental version by @gdi2290
- */
-if ( ENV === 'development' && HMR === true) {
-  // activate hot module reload
-  let ngHmr = require('angular2-hmr');
-  ngHmr.hotModuleReplacement(main, module);
-} else {
-  // bootstrap when document is ready
-  document.addEventListener('DOMContentLoaded', () => main());
-}
+bootloader(main);

frontend/src/main.ts

@@ -17,5 +17,5 @@ if (ENV === 'production') {
   // prod
 } else {
   // dev
-  require('angular2-hmr');
+  require('@angularclass/hmr');
 }

frontend/src/vendor.ts

@@ -0,0 +1,21 @@
+// angular2
+import '@angular/platform-browser';
+import '@angular/platform-browser-dynamic';
+import '@angular/core';
+import '@angular/common';
+import '@angular/forms';
+import '@angular/http';
+import '@angular/router';
+
+import 'rxjs';
+import 'jquery';
+import 'bootstrap-loader';
+import 'font-awesome-sass-loader';
+import 'lodash';
+
+if (ENV === 'production') {
+  // prod
+} else {
+  // dev
+  require('@angularclass/hmr');
+}