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",