Make whole frontend dynamically configurable to avoid rebuilds

src/app/app.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Title } from '@angular/platform-browser';
-import { config } from './config';
+import { SiteConfigService } from './services/config.service';
 
 @Component({
   selector: 'app-root',
@@ -8,18 +8,27 @@ import { config } from './config';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent implements OnInit {
-  documentTitle: string = config.documentTitle;
-
-  constructor(private titleService: Title) {}
+  constructor(
+    private titleService: Title,
+    private configService: SiteConfigService
+  ) {}
 
   ngOnInit() {
-    this.titleService.setTitle(this.documentTitle);
-    if (config.dashboard.askReloadSite) {
-      window.addEventListener('beforeunload', (event) => {
-        const confirmationMessage = 'Refreshing this page may mess up your challenge/tutorial state. Are you sure?';
-        event.returnValue = confirmationMessage;
-        return confirmationMessage;
-      });
-    }
+    this.configService.init();
+    this.configService.documentTitle.subscribe(title => this.titleService.setTitle(title));
+
+    this.configService.askReloadSite.subscribe(askReloadSite => {
+      if (askReloadSite) {
+        window.addEventListener('beforeunload', this.beforeUnloadHandler);
+      } else {
+        window.removeEventListener('beforeunload', this.beforeUnloadHandler);
+      }
+    });
+  }
+
+  beforeUnloadHandler(event) {
+    const confirmationMessage = 'Refreshing this page may mess up your challenge/tutorial state. Are you sure?';
+    event.returnValue = confirmationMessage;
+    return confirmationMessage;
   }
 }