From 928d7a45a372003547b86be1ff3725288da43ad4 Mon Sep 17 00:00:00 2001 From: Alexandre Vryghem Date: Tue, 27 Jun 2023 15:26:49 +0200 Subject: [PATCH 1/4] 103176: Fix vcr not being defined yet in OnInit hook --- src/app/shared/theme-support/themed.component.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/shared/theme-support/themed.component.ts b/src/app/shared/theme-support/themed.component.ts index 2ff0713f460..920fbba6e56 100644 --- a/src/app/shared/theme-support/themed.component.ts +++ b/src/app/shared/theme-support/themed.component.ts @@ -1,10 +1,10 @@ import { + AfterViewInit, Component, ViewChild, ViewContainerRef, ComponentRef, SimpleChanges, - OnInit, OnDestroy, ComponentFactoryResolver, ChangeDetectorRef, @@ -21,7 +21,7 @@ import { GenericConstructor } from '../../core/shared/generic-constructor'; styleUrls: ['./themed.component.scss'], templateUrl: './themed.component.html', }) -export abstract class ThemedComponent implements OnInit, OnDestroy, OnChanges { +export abstract class ThemedComponent implements AfterViewInit, OnDestroy, OnChanges { @ViewChild('vcr', { read: ViewContainerRef }) vcr: ViewContainerRef; protected compRef: ComponentRef; @@ -49,7 +49,7 @@ export abstract class ThemedComponent implements OnInit, OnDestroy, OnChanges } } - ngOnInit(): void { + ngAfterViewInit(): void { this.destroyComponentInstance(); this.themeSub = this.themeService.getThemeName$().subscribe(() => { this.renderComponentInstance(); From 873a8e16a362794eab85d09afa73c9f6c787c169 Mon Sep 17 00:00:00 2001 From: Alexandre Vryghem Date: Mon, 24 Jul 2023 23:42:55 +0200 Subject: [PATCH 2/4] 101577: Ensure the component is always destroyed before rendering the new component --- src/app/shared/theme-support/themed.component.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/app/shared/theme-support/themed.component.ts b/src/app/shared/theme-support/themed.component.ts index 1df7f77f08a..d67efcb5bdc 100644 --- a/src/app/shared/theme-support/themed.component.ts +++ b/src/app/shared/theme-support/themed.component.ts @@ -60,7 +60,6 @@ export abstract class ThemedComponent implements OnInit, OnDestroy, OnChanges } ngOnInit(): void { - this.destroyComponentInstance(); this.initComponentInstance(); } @@ -81,8 +80,6 @@ export abstract class ThemedComponent implements OnInit, OnDestroy, OnChanges } if (hasNoValue(this.lazyLoadObs)) { - this.destroyComponentInstance(); - this.lazyLoadObs = combineLatest([ observableOf(changes), this.resolveThemedComponent(this.themeService.getThemeName()).pipe( @@ -104,6 +101,7 @@ export abstract class ThemedComponent implements OnInit, OnDestroy, OnChanges } this.lazyLoadSub = this.lazyLoadObs.subscribe(([simpleChanges, constructor]: [SimpleChanges, GenericConstructor]) => { + this.destroyComponentInstance(); const factory = this.resolver.resolveComponentFactory(constructor); this.compRef = this.vcr.createComponent(factory); if (hasValue(simpleChanges)) { From ea677bda741bdccee8422945fb9cd7caa4f1e450 Mon Sep 17 00:00:00 2001 From: Alexandre Vryghem Date: Sun, 30 Jul 2023 19:43:20 +0200 Subject: [PATCH 3/4] Reset to base theme when no default theme is set and leaving UUID/handle theme --- src/app/shared/theme-support/theme.service.ts | 9 +++++---- src/config/config.util.ts | 7 +++++-- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/app/shared/theme-support/theme.service.ts b/src/app/shared/theme-support/theme.service.ts index 6d2939a5f88..762aece7299 100644 --- a/src/app/shared/theme-support/theme.service.ts +++ b/src/app/shared/theme-support/theme.service.ts @@ -29,7 +29,7 @@ export const themeStateSelector = createFeatureSelector('theme'); export const currentThemeSelector = createSelector( themeStateSelector, - (state: ThemeState): string => hasValue(state) ? state.currentTheme : undefined + (state: ThemeState): string => hasValue(state) ? state.currentTheme : BASE_THEME_NAME, ); @Injectable({ @@ -262,7 +262,7 @@ export class ThemeService { } // inherit the head tags of the default theme - return this.createHeadTags(defaultThemeConfig.name); + return this.createHeadTags(defaultThemeName); } return headTagConfigs.map(this.createHeadTag.bind(this)); @@ -425,9 +425,10 @@ export class ThemeService { * @private */ private getActionForMatch(newTheme: Theme, currentThemeName: string): SetThemeAction | NoOpAction { - if (hasValue(newTheme) && newTheme.config.name !== currentThemeName) { + const newThemeName: string = newTheme?.config.name ?? BASE_THEME_NAME; + if (newThemeName !== currentThemeName) { // If we have a match, and it isn't already the active theme, set it as the new theme - return new SetThemeAction(newTheme.config.name); + return new SetThemeAction(newThemeName); } else { // Otherwise, do nothing return new NoOpAction(); diff --git a/src/config/config.util.ts b/src/config/config.util.ts index c45282269c1..cf744b29203 100644 --- a/src/config/config.util.ts +++ b/src/config/config.util.ts @@ -5,7 +5,8 @@ import { environment } from '../environments/environment'; import { hasNoValue } from '../app/shared/empty.util'; import { AppConfig } from './app-config.interface'; -import { ThemeConfig } from './theme.model'; +import { ThemeConfig, NamedThemeConfig } from './theme.model'; +import { BASE_THEME_NAME } from '../app/shared/theme-support/theme.constants'; /** * Extend Angular environment with app config. @@ -44,7 +45,9 @@ const getDefaultThemeConfig = (): ThemeConfig => { hasNoValue(themeConfig.regex) && hasNoValue(themeConfig.handle) && hasNoValue(themeConfig.uuid) - ); + ) ?? { + name: BASE_THEME_NAME, + } as NamedThemeConfig; }; export { From e4b386b8156672b82561cb24e32961498a3e3dce Mon Sep 17 00:00:00 2001 From: Alexandre Vryghem Date: Sun, 6 Aug 2023 19:57:05 +0200 Subject: [PATCH 4/4] Fix createHeadTags infinite loop when your themes don't override the headTags property --- src/app/app.component.ts | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 669411d9aaf..08e6fc53337 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -316,14 +316,7 @@ export class AppComponent implements OnInit, AfterViewInit { if (hasValue(parentThemeName)) { // inherit the head tags of the parent theme return this.createHeadTags(parentThemeName); - } - const defaultThemeConfig = getDefaultThemeConfig(); - const defaultThemeName = defaultThemeConfig.name; - if ( - hasNoValue(defaultThemeName) || - themeName === defaultThemeName || - themeName === BASE_THEME_NAME - ) { + } else { // last resort, use fallback favicon.ico return [ this.createHeadTag({ @@ -336,9 +329,6 @@ export class AppComponent implements OnInit, AfterViewInit { }) ]; } - - // inherit the head tags of the default theme - return this.createHeadTags(defaultThemeConfig.name); } return headTagConfigs.map(this.createHeadTag.bind(this));