129694: PoC #4123 solution

Author: LotteHofstede

src/app/shared/theme-support/theme.effects.ts

@@ -1,29 +1,12 @@
 import { Injectable } from '@angular/core';
-import { createEffect, Actions, ofType, ROOT_EFFECTS_INIT } from '@ngrx/effects';
-import { map } from 'rxjs/operators';
-import { SetThemeAction } from './theme.actions';
-import { hasValue } from '../empty.util';
-import { BASE_THEME_NAME } from './theme.constants';
-import { getDefaultThemeConfig } from '../../../config/config.util';
+import { Actions } from '@ngrx/effects';
 
 @Injectable()
 export class ThemeEffects {
   /**
    * Initialize with a theme that doesn't depend on the route.
    */
-  initTheme$ = createEffect(() =>
-    this.actions$.pipe(
-      ofType(ROOT_EFFECTS_INIT),
-      map(() => {
-        const defaultThemeConfig = getDefaultThemeConfig();
-        if (hasValue(defaultThemeConfig)) {
-          return new SetThemeAction(defaultThemeConfig.name);
-        } else {
-          return new SetThemeAction(BASE_THEME_NAME);
-        }
-      })
-    )
-  );
+
 
   constructor(
     private actions$: Actions,

src/app/shared/theme-support/theme.service.ts

@@ -334,6 +334,13 @@ export class ThemeService {
             take(1),
             map((theme: Theme) => this.getActionForMatch(theme, currentTheme))
           );
+        } else if (hasNoValue(currentTheme)) {
+          const defaultThemeConfig = getDefaultThemeConfig();
+          if (hasValue(defaultThemeConfig)) {
+            return [new SetThemeAction(defaultThemeConfig.name)];
+          } else {
+            return [new SetThemeAction(BASE_THEME_NAME)];
+          }
         } else {
           // If there are no themes configured, do nothing
           return observableOf(new NoOpAction());

src/app/shared/theme-support/themed.component.ts

@@ -11,11 +11,16 @@ import {
   HostBinding,
   ElementRef,
 } from '@angular/core';
-import { hasNoValue, hasValue, isNotEmpty } from '../empty.util';
 import { combineLatest, from as fromPromise, Observable, of as observableOf, Subscription, BehaviorSubject } from 'rxjs';
 import { ThemeService } from './theme.service';
 import { catchError, switchMap, map, tap } from 'rxjs/operators';
 import { GenericConstructor } from '../../core/shared/generic-constructor';
+import {
+  hasNoValue,
+  hasValue,
+  hasValueOperator,
+  isNotEmpty,
+} from '../empty.util';
 import { BASE_THEME_NAME } from './theme.constants';
 
 @Component({
@@ -54,6 +59,7 @@ export abstract class ThemedComponent<T> implements AfterViewInit, OnDestroy, On
   protected abstract getComponentName(): string;
 
   protected abstract importThemedComponent(themeName: string): Promise<any>;
+
   protected abstract importUnthemedComponent(): Promise<any>;
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -82,16 +88,17 @@ export abstract class ThemedComponent<T> implements AfterViewInit, OnDestroy, On
   }
 
   initComponentInstance(changes?: SimpleChanges) {
-    this.themeSub = this.themeService?.getThemeName$().subscribe(() => {
-      this.renderComponentInstance(changes);
-    });
+    this.themeSub = this.themeService?.getThemeName$()
+      .pipe(hasValueOperator())
+      .subscribe(() => {
+        this.renderComponentInstance(changes);
+      });
   }
 
   protected renderComponentInstance(changes?: SimpleChanges): void {
     if (hasValue(this.lazyLoadSub)) {
       this.lazyLoadSub.unsubscribe();
     }
-
     if (hasNoValue(this.lazyLoadObs)) {
       this.lazyLoadObs = combineLatest([
         observableOf(changes),