129694: PoC #4123 solution

Author: LotteHofstede

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

@@ -11,25 +11,14 @@ import { getDefaultThemeConfig } from '../../../config/config.util';
 import { hasValue } from '../empty.util';
 import { SetThemeAction } from './theme.actions';
 import { BASE_THEME_NAME } from './theme.constants';
+import { NoOpAction } from '../ngrx/no-op.action';
 
 @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

@@ -383,6 +383,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

@@ -29,7 +29,7 @@ import {
 import { GenericConstructor } from '../../core/shared/generic-constructor';
 import {
   hasNoValue,
-  hasValue,
+  hasValue, hasValueOperator,
   isNotEmpty,
 } from '../empty.util';
 import { BASE_THEME_NAME } from './theme.constants';
@@ -71,6 +71,7 @@ export abstract class ThemedComponent<T extends object> implements AfterViewInit
   protected abstract getComponentName(): string;
 
   protected abstract importThemedComponent(themeName: string): Promise<any>;
+
   protected abstract importUnthemedComponent(): Promise<any>;
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -99,16 +100,17 @@ export abstract class ThemedComponent<T extends object> implements AfterViewInit
   }
 
   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),