angular.json

@@ -49,6 +49,14 @@
                   "with": "src/environments/environment.prod.ts"
                 }
               ]
+            },
+            "hmr": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.hmr.ts"
+                }
+              ]
             }
           }
         },
@@ -60,6 +68,10 @@
           "configurations": {
             "production": {
               "browserTarget": "v5.x:build:production"
+            },
+            "hmr": {
+              "hmr": true,
+              "browserTarget": "v5.x:build:hmr"
             }
           }
         },

package-lock.json

@@ -1401,6 +1401,12 @@
         "tslib": "^1.9.0"
       }
     },
+    "@angularclass/hmr": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@angularclass/hmr/-/hmr-2.1.3.tgz",
+      "integrity": "sha1-NOZY7T2jfyOwogDi2lqJvpK7IJ8=",
+      "dev": true
+    },
     "@babel/code-frame": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0.tgz",
@@ -5787,6 +5793,11 @@
       "integrity": "sha1-gGZJMmzqp8qjMG112YXqJ0i6kTw=",
       "dev": true
     },
+    "dialog-polyfill": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/dialog-polyfill/-/dialog-polyfill-0.5.0.tgz",
+      "integrity": "sha512-fOj68T8KB6UIsDFmK7zYbmORJMLYkRmtsLM1W6wbCVUWu4Hdcud5bqbvuueTxO84JXtK9HcpCHV9vNwlWUdCIw=="
+    },
     "diff": {
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz",

package.json

@@ -10,6 +10,7 @@
     "build": "ng build --prod",
     "prebuild-dev": "gulp build.sass --deploy-url=http://localhost/en",
     "build-dev": "ng build --output-path dist/en --deploy-url=/en/ --watch=true --poll=800",
+    "serve-dev": "ng serve --host=0.0.0.0 --deploy-url=/en/ --configuration=hmr --hmr --poll=800 --progress",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "cypress run --debug",
@@ -57,6 +58,7 @@
     "@angular/cli": "^7.2.1",
     "@angular/compiler-cli": "~8.0.3",
     "@angular/language-service": "~8.0.3",
+    "@angularclass/hmr": "^2.1.3",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "~2.0.4",
     "@types/node": "~10.12.18",

src/app/app.component.ts

@@ -35,8 +35,6 @@ export class Minds {
 
   showTOSModal: boolean = false;
 
-  paramsSubscription;
-
   protected router$: Subscription;
 
   constructor(
@@ -125,7 +123,6 @@ export class Minds {
   ngOnDestroy() {
     this.loginReferrer.unlisten();
     this.scrollToTop.unlisten();
-    this.paramsSubscription.unsubscribe();
   }
 
   @HostBinding('class') get cssColorSchemeOverride() {

src/app/modules/notifications/notification.service.ts

@@ -116,6 +116,6 @@ export class NotificationService {
   }
 
   ngOnDestroy() {
-    this.notificationPollTimer.unsubscribe();
+    this.updateNotificationCountSubscription.unsubscribe();
   }
 }

src/environments/environment.hmr.ts

+export const environment = {
+  production: false,
+  version: 'VERSION',
+  hmr: true,
+};

src/environments/environment.prod.ts

 export const environment = {
   production: true,
   version: 'VERSION',
+  hmr: false,
 };

src/environments/environment.ts

@@ -6,4 +6,5 @@
 export const environment = {
   production: false,
   version: 'VERSION',
+  hmr: false,
 };

src/hmr.ts

+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,9 +3,21 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { MindsModule } from './app/app.module';
 import { environment } from './environments/environment';
+import { hmrBootstrap } from './hmr';
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(MindsModule);
+const bootstrap = () => platformBrowserDynamic().bootstrapModule(MindsModule);
+
+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().catch(err => console.log(err));
+}

src/tsconfig.app.json

@@ -4,7 +4,7 @@
     "outDir": "../out-tsc/app",
     "baseUrl": "./",
     "module": "es2015",
-    "types": []
+    "types": ["node"]
   },
   "exclude": [
     "test.ts",