fix: display of duplicated headers for special logins with activated hydration

docs/guides/migrations.md

@@ -17,6 +17,9 @@ For this reason the `messageToMerchant` feature toggle is removed as a configura
 To still be able to configure the message to merchant feature via feature toggle in ICM 7.10 environments an [`ICMCompatibilityInterceptor`](../../src/app/core/interceptors/icm-compatibility.interceptor.ts) was introduced that can be enabled in ICM 7.10 based projects in the [`core.module.ts`](../../src/app/core/core.module.ts).
 In addition the `'messageToMerchant'` environment feature toggle option needs to be enabled in the [`environment.model.ts`](../../src/environments/environment.model.ts).
 
+To address an Angular hydration issue ([#1585](https://github.com/intershop/intershop-pwa/pull/1585)) the `header` component rendering was changed and in addition a `HeaderType` was introduced for the standard header types `['simple', 'error', 'checkout']`.
+If in a project other header types are used these header types and the rendering needs to be adapted accordingly.
+
 ## From 4.2 to 5.0
 
 Starting with the Intershop PWA 5.0 we develop and test against an Intershop Commerce Management 11 server.

src/app/core/models/viewtype/viewtype.types.ts

@@ -1,3 +1,7 @@
 export type ViewType<T extends string = ''> = T | ('grid' | 'list');
 
 export type DeviceType<T extends string = ''> = T | ('mobile' | 'tablet' | 'desktop');
+
+export const headerTypes = <const>['simple', 'error', 'checkout'];
+
+export type HeaderType = (typeof headerTypes)[number];

src/app/core/store/core/viewconf/viewconf.selectors.ts

@@ -1,5 +1,6 @@
 import { createSelector } from '@ngrx/store';
 
+import { HeaderType } from 'ish-core/models/viewtype/viewtype.types';
 import { getCoreState } from 'ish-core/store/core/core-store';
 import { selectRouteData } from 'ish-core/store/core/router';
 
@@ -13,7 +14,7 @@ const getViewconfState = createSelector(
 
 export const getWrapperClass = selectRouteData<string>('wrapperClass');
 
-export const getHeaderType = selectRouteData<string>('headerType');
+export const getHeaderType = selectRouteData<HeaderType>('headerType');
 
 export const getBreadcrumbData = createSelector(getViewconfState, state => state.breadcrumbData);
 

src/app/shell/header/header/header.component.html

@@ -1,11 +1,12 @@
-<ng-container [ngSwitch]="headerType$ | async">
-  <ish-header-error *ngSwitchCase="'error'" />
-  <ish-header-simple *ngSwitchCase="'simple'" />
-  <ish-header-checkout *ngSwitchCase="'checkout'" />
-
-  <ng-container *ngSwitchDefault>
-    <ish-header-default [isSticky]="isSticky$ | async" [deviceType]="deviceType$ | async" [reset]="reset$ | async" />
-  </ng-container>
+<!-- using ngIf instead of ngSwitch to resolve an issue with hydration and duplicate headers for special logins -->
+<ng-container *ngIf="headerType$ | async as headerType; else defaultHeader">
+  <ish-header-simple *ngIf="headerType === 'simple'" />
+  <ish-header-error *ngIf="headerType === 'error'" />
+  <ish-header-checkout *ngIf="headerType === 'checkout'" />
 </ng-container>
 
+<ng-template #defaultHeader>
+  <ish-header-default [isSticky]="isSticky$ | async" [deviceType]="deviceType$ | async" [reset]="reset$ | async" />
+</ng-template>
+
 <ish-back-to-top />

src/app/shell/header/header/header.component.ts

@@ -1,26 +1,28 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { Event, NavigationStart, Router } from '@angular/router';
 import { Observable } from 'rxjs';
-import { filter } from 'rxjs/operators';
+import { filter, map } from 'rxjs/operators';
 
 import { AppFacade } from 'ish-core/facades/app.facade';
-import { DeviceType } from 'ish-core/models/viewtype/viewtype.types';
+import { DeviceType, HeaderType, headerTypes } from 'ish-core/models/viewtype/viewtype.types';
 
 @Component({
   selector: 'ish-header',
   templateUrl: './header.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HeaderComponent implements OnInit {
-  headerType$: Observable<string>;
+  headerType$: Observable<HeaderType>;
   deviceType$: Observable<DeviceType>;
   isSticky$: Observable<boolean>;
   reset$: Observable<Event>;
 
   constructor(private appFacade: AppFacade, private router: Router) {}
 
   ngOnInit() {
-    this.headerType$ = this.appFacade.headerType$;
+    this.headerType$ = this.appFacade.headerType$.pipe(
+      map(headerType => (headerTypes.includes(headerType) ? headerType : undefined))
+    );
     this.deviceType$ = this.appFacade.deviceType$;
     this.isSticky$ = this.appFacade.stickyHeader$;
     this.reset$ = this.router.events.pipe(filter(event => event instanceof NavigationStart));